[Vuejs]-Vue, how can I render different navbar due to route?

by

1👍

✅

Actually what you can do is make a navbar component and use v-if to check on which route you are currently on. You can use the $route object to verify the current URL and use computed to check if the route name or params/queries are the same as you want.

computed: {
  dashboard() {
     return this.$route.name === 'Dashboard'
  }
}

And then in your navbar component use v-if="dashboard" to check your conditions

👤Prakhar Gupta

2👍

You can do it using named routes. In your component you set multiple named router views:

  <router-view name="navbar"></router-view>
  <router-view ></router-view>

And in routes you set which component to render and where:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeContent,
        navbar: HomeNavbar,
      }
    },
    {
      path: '/dashboard',
      components: {
        default: DashboardContent,
        navbar: DashboardNavbar,
      }
    }
  ]
})

Otherwise you can set a conditional in the component and render navbar based on route:

  if ($route.path === home) {
   <NavbarHome />
  }

If navbars have much in common you can just use a conditional for elements that are in one but not in another.

👤catmal

Leave a comment