[Vuejs]-True or False to show route-item in navbar

0👍

Youa re very close, but you need to wrap your custom property in meta option:

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { showOnBar: true }
  },
  {
    path: "/about",
    name: "About",
    meta: { showOnBar: true }
    component: () => import("@/views/About.vue")
  },
  {
    path: "/aktuelles",
    name: "Aktuelles",
    meta: { showOnBar: true },
    component: () => import("@/views/Aktuelles.vue")
  },
  {
    path: "/datenschutz",
    name: "Datenschutz",
    meta: { showOnBar: false }
    component: () => import("@/views/Datenschutz.vue")
  }
];

and access it via route.meta.showOnBar. Keep in mind that you only need to define it for routes you want to show on your navbar.

0👍

You need to wrap your custom route properties into meta as stated in BroiSatse’s answer.

However, another issue is that you used :v-if (i.e. you bound the v-if attribute) instead of just using v-if. v-if already evaluates the condition in the value as per the docs.

Here’s a sandbox to play around with: https://codesandbox.io/s/stack-overflow-q-62409392-6zovw?file=/src/router/index.js

Leave a comment