javascript - Vue-Router 仅适用于某些路由

Question

我的 vue-router 正确路由了所有菜单按钮上的 URL，但没有正确显示每个 Vue 组件。可以找到演示here .

在我的 HTML 内部(我正在使用 Vuefy)

<div class="navbar-start">
        <a class="navbar-item">
          <router-link to="/" class="router-link">  // <-- THIS WORKS
          Home
        </router-link>
        </a>
        <a class="navbar-item">
          <router-link to="/items" class="router-link">  // <-- THIS WORKS
          My Products
        </router-link>
        </a>
      <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            <router-link to="/information" class="router-link">  // <-- DOES NOT WORK
            Info
            </router-link>
          </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item">
            <router-link to="/about" class="router-link">  // <-- THIS WORKS
            About
            </router-link>
          </a>
          <a class="navbar-item">
            <router-link to="/terms" class="router-link">  // <-- DOES NOT WORK
            Terms
          </router-link>
          </a>
        </div>
      </div>
    </div>

我的 router.js 文件设置如下:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    },
    {
      path: '/new',
      name: 'create-item',
      component: () => import('./views/CreateItem.vue')
    },
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/items',
      name: 'my-items',
      component: () => import('./views/MyItems.vue')
    },
    {
      path: '/signin',
      name: 'sign-in',
      components: () => import('./views/SignIn.vue')
    },
    {
      path: '/terms',
      name: 'terms',
      components: () => import('./views/Terms.vue')
    },
    {
      path: '/information',
      name: 'info',
      components: () => import('./views/Info.vue')
    }
  ]
})

此外，我的 App.vue 文件正确显示了路由器 View 以及菜单。

<template>
  <div id="app">
    <div id="nav">
      <Menu/>
    </div>
    <router-view/>
  </div>
</template>

<script type="text/javascript">
    import Menu from '@/components/Menu.vue'

    export default {
      components: {
        Menu
      }
    }
</script>

下面是我的导航照片。重复一遍，点击“信息”和“条款”(信息的子菜单)不会加载它们各自的 Vue 组件，但会更改 URL。

我仔细检查了我的语法并检查了文档，但似乎找不到我的错误。可以找到托管我的代码的平台 here .任何帮助，将不胜感激。谢谢，埃德温。

Answer 1

我发现了错误。我在 routes.js 文件中多次拼写“component”而不是“components”。