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

by

0👍

✅

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!

👤pythag0ras_

2👍

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

👤Rodrigo

1👍

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

Leave a comment