首页 文章

Vue路由器没有加载组件

提问于
浏览
1

所以我一直在调查vue并且遇到了一个我似乎无法找到解决方案的问题 . 我正在使用Vue和Vue路由器 . 我从基本的vue webpack模板开始,它提供了最初的样板文件 .

我已经成功地添加了预定义路线的其他路线,这些路线按预期工作(游戏,锦标赛,统计和用户路线工作得很好) . 但是现在我无法获得额外的工作路线 . “游戏”路线不起作用,我也尝试添加其他似乎也不起作用的路线 .

所以这是我当前的路由器文件(index.js):

import Vue from 'vue'
import Router from 'vue-router'
const Gaming = () => import('@/components/gaming.vue');
const Home = () => import('@/components/home.vue');
const Game = () => import('@/components/game.vue');
const Tournament = () => import('@/components/tournament.vue');
const Users = () => import('@/components/users.vue');
const Stats = () => import('@/components/stats.vue');


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/games',
      name: 'Game',
      component: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      components: Gaming,
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      component: Tournament
    },
    {
      path: '/users',
      name: 'Users',
      component: Users
    },
    {
      path: '/stats',
      name: 'Stats',
      component: Stats
    }
  ]
});

export default router;

Vue.use(Router);

除“游戏”路线外,我的所有路线都按预期工作 . “游戏”组件如下所示:

<template>
  <div>
    <h1>WTF?!?!?!?!?=!?!</h1>
  </div>
</template>

<script>
  export default {
    name: 'Gaming',
    components: {},
    data() {
      return {}
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

我曾试图复制/粘贴一个工作组件,只更改名称和模板 . 但它似乎有问题 . 最初我做了路线组件导入正常的“样板”方式

import Stats from '@/components/Stats'

其中几乎有相同的结果,除非这会导致尝试导航到“游戏”路线时出现异常 .

Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-c9036282","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/gaming.vue (app.js:4240), <anonymous>:3:16)

所有其他路线都有效 . 我也尝试重新创建所有文件并重新执行似乎无法正常工作的特定路由 . 所以我不知道我能做些什么来解决这个问题?

在这里我尝试检查路线,正如您所看到的那样,组件缺失"everything" Inspecting the route

还尝试使用vue插件查看chrome,其中组件未加载到视图中

Vue Chrome Extension

如果有人想要调整它,请将项目上传到gdrive Google Drive Link

1 回答

  • 0

    发现问题:

    const router = new Router({
      routes: [
        {
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          path: '/games',
          name: 'Game',
          component: Game,
        },
        {
          path: '/wtf',
          name: 'Gaming',
          components <----------: Gaming,
          // Should be component not componentS
        },
        {
          path: '/tournaments',
          name: 'Tournament',
          component: Tournament
        },
        ...
    

    此外,您应该使用标准的导入方法 . 如果没有这个错误,我将永远不会发现这个问题 .

相关问题