CODEWITHSUNDEEP
javascripthtmlvue.jssingle-page-applicationvue-router
pythag0ras_
pythag0ras_

Reputation: 162

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:

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

And here's from 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>

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: "/",
      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

Upvotes: 0

Views: 2676

Answers (3)

pythag0ras_
pythag0ras_

Reputation: 162

Turns out I was returning an empty dictionary in a few data() functions, and that caused the app to break. Thanks to @inked6233 on the Vue Land discord for helping me find that!

Upvotes: 0

Rodrigo
Rodrigo

Reputation: 481

The link attribute inside the array of items should contain a '/' at the beginning of every route. So, it should look like this:

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

Also, it is probable that the component is not being rendered because you are using <v-btn/> for routing, instead of <router-link/>.

I recommend you use <router-link/> instead of <v-btn/> for navigation in order to support all the features provided by Vue Router like history mode, base, etc.

In case you necessarily need the v-btn, I think you can wrap the <router-link/> inside the button or viceversa.

For more information about Vue Router and <router-link/>, check out this link: https://router.vuejs.org/api/#router-link

Upvotes: 2

Jethro91
Jethro91

Reputation: 565

where is your vue router component definitions? e.g

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

Upvotes: 1

Related Questions