Javascript Vue路由器仅在某些路由上工作

我的vue路由器正确路由所有菜单按钮上的URL，但没有正确显示每个vue组件。可以找到一个演示

在我的HTML中（我正在使用Vuefy）

此外，my App.vue文件正确显示路由器视图以及菜单

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

从“@/components/Menu.vue”导入菜单
导出默认值{
组成部分：{
菜单
}
}

以下是我的航海照片。要重复，单击“信息”和“术语”（信息的子菜单）不会加载各自的Vue组件，但会更改URL。

---

我三次检查了我的语法和文档，但似乎找不到我的错误。可以找到我的代码所在的平台。任何帮助都将不胜感激。谢谢，埃德温。

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

我很好奇为什么

元素被包装在锚定标记中。这是Vuefy还是Bulma的问题？@DigitalDriver是对的，在渲染其最有可能出现问题的嵌套链接时，只需将

导航条链接

类放在

路由器链接

上，并移除外部锚定标记，同时下拉菜单将触发

信息

链接，当用户可能需要

关于

时。

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')
    }
  ]
})

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