时间戳

首页 > 解决方案 > Vue路由器未加载组件

javascript - Vue路由器未加载组件

问题描述

所以我一直在研究 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)

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

在这里，我尝试检查路线，并且您可以看到该组件缺少“一切” 检查路线

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

Vue Chrome 扩展

如果有人想调整它，将项目上传到 gdrive 谷歌驱动器链接

标签： javascriptvuejs2vue-router

解决方案

发现问题：

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

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

推荐阅读