Vue路由器未加载组件

Posted 2023-02-23

【中文标题】Vue路由器未加载组件

【英文标题】：Vue router not loading component

【发布时间】：2018-10-11 20:20:19

【问题描述】：

所以我一直在研究 vue 并遇到了一个我似乎无法找到解决方案的问题。我正在使用 Vue 和 Vue-router。我从提供初始样板的基本 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)

所有其他路线都有效。我还尝试重新创建所有文件并重新执行似乎也不起作用的特定路线。所以我不知道我能做些什么来解决这个问题？

在这里我尝试检查路线，正如您所见，该组件缺少“一切” Inspecting the route

还尝试使用 chrome 的 vue 插件查找组件未加载到视图中的位置

Vue Chrome Extension

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

【问题讨论】：

这是一个非常奇怪的问题，我看不出有什么明显的错误。您是否尝试过更改 1) 路由路径 2) 路由名称 3) 它使用的组件？

是的，最初路径是 /games/:match 和名称 Gameplaying，然后我将其更改为 /gaming 和游戏（尝试在“root”上创建它）然后我再次更改它到 /wtf 和游戏。还尝试删除该组件并再次创建它。除了这个也不起作用的组件之外，还使用新组件创建新路径/名称。所以它几乎就像允许的路线数量有限制

尝试将组件字段更改为 Home 而不是 Gaming。

似乎没有用。如果您想仔细查看其余问题，我已经编辑了问题并添加了一个从谷歌驱动器下载的链接。

我会测试一下

【参考方案1】：

发现问题：

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
    ,
    ...

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

【讨论】：

天哪，谢谢！ :D 我已经尝试了好几个小时了。知道这一定是像这样的愚蠢错误......

是的，哈哈。另外，你应该试试 eslint。 Eslint 有助于在这些问题发生之前发现它们。我不确定它在这种情况下是否有帮助，但在其他情况下肯定有帮助