Vue-Router 仅适用于某些路由

Posted 2023-02-22

【中文标题】Vue-Router 仅适用于某些路由

【英文标题】：Vue-Router only works on some routes

【发布时间】：2019-01-05 13:08:30

【问题描述】：

我的 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 文件正确显示了路由器视图以及菜单。

<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 找到。任何帮助，将不胜感激。谢谢，埃德温。

【问题讨论】：

我很好奇为什么<router-link> 元素被包裹在锚标签中。这是 Vuefy 还是 Bulma 的事情？

@DigitalDrifter 是对的，在渲染它的嵌套链接时，这很可能是问题所在，而只需将 navbar-link 类放在 router-link 上并删除外部锚标签，也就是下拉当用户可能想要about 时，将触发information 链接。

【参考方案1】：

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