Question

我的Vue路由器正确路由了所有菜单按钮上的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文件可以正确显示路由器视图以及菜单。

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

以下是我的导航照片。重复一遍，单击“ info”和“ terms”（info的子菜单）不会加载它们各自的Vue组件，但是确实会更改URL。

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

Answer 1

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

Vue-Router仅适用于某些路线

1 个答案: