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

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:

  <div id="app">
    <v-toolbar id="navbar" app color="#330066" dark>
      <v-toolbar-title>{{ appname }}</v-toolbar-title>
      <span :key="item.title" v-for="item in items">
        <v-btn flat :to="item.link">{{ item.title }}</v-btn>

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

And here’s from App.vue:

      <NavBar appname="Test" />
      <router-view />

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

  components: {

  data() {
    return {};

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


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

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

  1. where is your vue router component definitions?

    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({
    const app = new Vue({

Leave a Comment