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

by

I’m using Vue to make a single-page application and I have a navbar and have set up Vue-Router. For some reason, every time after the first time I use the navbar, the route changes but the router-view does not. Here’s the code from 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>{{ appname }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <span :key="item.title" v-for="item in items">
        <v-btn flat :to="item.link">{{ item.title }}</v-btn>
      </span>
    </v-toolbar>
  </div>
</template>

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

And here’s from App.vue:

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

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

  components: {
    NavBar,
  },

  data() {
    return {};
  },
};
</script>

Here’s from 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: "/home",
      name: "Home",
      component: Home
    },
    {
      path: "/search",
      name: "Search",
      component: Search
    }
  ]
});

If you need anything else, the full code is on my github, and a demo is at a netlify site

24 thoughts on “Why is my Vue navbar changing the route but not updating the router-view?”

Leave a Comment