为啥我的 Vue 导航栏更改了路由但没有更新路由器视图？

Posted 2023-02-22

【中文标题】为啥我的 Vue 导航栏更改了路由但没有更新路由器视图？

【英文标题】：Why is my Vue navbar changing the route but not updating the router-view?为什么我的 Vue 导航栏更改了路由但没有更新路由器视图？

【发布时间】：2021-05-19 03:08:51

【问题描述】：

我正在使用 Vue 制作单页应用程序，并且我有一个导航栏并设置了 Vue-Router。出于某种原因，每次我第一次使用导航栏后，路由都会改变，但路由器视图不会。这是来自NavBar.vue的代码：

<template>
  <div id="app">
    <v-toolbar id="navbar" app color="#330066" dark>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title id="appname"> appname </v-toolbar-title>
      <v-spacer></v-spacer>
      <span :key="item.link" v-for="item in items" class="nav-elt">
        <router-link active-class="nav-elt-active" tag="span" :to="item.link">
           item.title 
        </router-link>
      </span>
    </v-toolbar>
  </div>
</template>

<script>
export default 
  name: "NavBar",
  props: 
    appname: String,
  ,
  data() 
    return 
      items: [
         title: "Home", link: "/" ,
         title: "Search", link: "/search" ,
      ],
    ;
  ,
;
</script>

这是来自App.vue：

<template>
  <v-app>
    <v-main>
      <NavBar appname="Newsfacts" />
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
import NavBar from "./components/NavBar";
export default 
  name: "App",

  components: 
    NavBar,
  ,

  data() 
    return ;
  ,
;
</script>

来自router/index.js：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import Search from '../views/Search.vue';

Vue.use(Router);

export default new Router(
  mode: "history",
  routes: [

    
      path: "/",
      name: "Home",
      component: Home
    ,
    
      path: "/search",
      name: "Search",
      component: Search
    
  ]
);

如果您需要其他任何东西，完整代码在我的github 上，演示在netlify 网站上

【问题讨论】：

您的密钥有误，请将name 替换为link 或title <span :key="item.link" v-for="item in items">

@OleksiiZelenko 哈哈，我的错！谢谢！

如果答案对你有帮助，请标记）

它没有解决问题，但它仍然是一个很好的问题:)

需要更多代码。 Home.vueSearch.vue

【参考方案1】：

原来我在几个 data() 函数中返回了一个空字典，这导致应用程序崩溃。感谢 Vue Land discord 上的 @inked6233 帮助我找到了这一点！

【参考方案2】：

项目数组中的链接属性应该在每条路由的开头包含一个'/'。 所以，它应该是这样的：

data() 
    return 
      items: [
         title: "Home", link: "/home" ,
         title: "Search", link: "/search" ,
      ],
    ;
  ,

此外，组件没有被渲染可能是因为您使用<v-btn/> 进行路由，而不是<router-link/>。

我建议您使用<router-link/> 而不是<v-btn/> 进行导航，以支持 Vue Router 提供的所有功能，例如历史模式、基础等。

如果你一定需要 v-btn，我认为你可以将 <router-link/> 包裹在按钮内，反之亦然。

有关 Vue 路由器和<router-link/> 的更多信息，请查看此链接： https://router.vuejs.org/api/#router-link

【讨论】：

我添加了这两件事，但它们似乎没有什么不同。这个问题的奇怪之处在于，我第一次单击导航栏时 会更新，但随后不会。

您是否将v-btn 替换为router-link？

是的，我现在会更新我的帖子。不过还是谢谢你的建议！ :)

【参考方案3】：

你的 vue 路由器组件定义在哪里？ 例如

const FooHome=  template: '<div>Home</div>' 
const Search=  template: '<div>Search</div>' 


const routes = [
   path: '/', component: Home,
   path: '/search', component: Search
]

const router = new VueRouter(
  routes
)

const app = new Vue(
  router
).$mount('#app')

【讨论】：

在router/index.js，我会添加到我的帖子中。