Question

所以我一直在调查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)

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

在这里我尝试检查路线，你可以看到组件缺少“一切” Inspecting the route

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

Vue Chrome Extension

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

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

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

Vue路由器没有加载组件

1 个答案: