为什么我的 Vue 导航栏会更改路线但不会更新路由器视图？

Question

我正在使用 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, and a demo is at a netlify 网站上

Answer 1

你的 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')

Answer 2

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

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 和 <router-link/> 的更多信息，请查看此 link： https://router.vuejs.org/api/#router-link

Answer 3

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

为什么我的 Vue 导航栏会更改路线但不会更新路由器视图？

Why is my Vue navbar changing the route but not updating the router-view?

html

javascript

single-page-application

vue.js

vue-router