Vue 路由器不加载组件

Question

所以我一直在研究 vue 并遇到了一个我似乎无法找到解决方案的问题。我正在使用 Vue 和 Vue-router。我从提供初始样板的基本 vue + webpack 模板开始。

我已经成功地将额外的路线添加到预定义的路线中，它按预期工作（游戏、锦标赛、统计和用户路线工作得很好）。但是现在我无法获得额外的工作路线。 "gaming" 路由不起作用，我也尝试添加其他似乎也不起作用的路由。

这是我当前的路由器文件 (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);

除 "Gaming" 路线外，我的所有路线都按预期工作。 "Gaming" 组件如下所示：

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

我几乎 copy/paste 尝试了一个工作组件，并且只更改了名称和模板。但它似乎有问题。最初我完成了路由组件导入正常 "boilerplate" 方式

import Stats from '@/components/Stats'

几乎有相同的结果，除了这会在尝试导航到 "gaming" 路线时导致异常。

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

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 路由器不加载组件

Vue router not loading component

javascript

vue-router

vuejs2