[Vuejs]-Excluding Resuable global components from another component

by

0👍

As answered by @Badgy

Make a v-if="$route.path !== 'yourpathwhereyoudontwantthenavbar

Example: 

// this will not display the sidebar on the register page
<Sidebar v-if="$route.path !== '/register'" />

Another Alternative by myself:

Define where you want these components to appear in the meta options of your route objects https://router.vuejs.org/guide/advanced/meta.html. It’s more or less just a way to attach arbitrary information which you can fetch from the current route to determine e.g. your layouting

const router = new Router({
  routes: [
    {
      path: '/users',
      name: 'users',
      component: Users,
      meta: { sidebar: true, navbar: true },
    },
  },
})

// This will make the sidebar appear in the user page
<sidebar v-if="$route.meta.sidebar">

You can do <sidebar v-if="!$route.meta.sidebar"> if you don’t want it just in 1 component

Leave a comment