Верно или неверно, чтобы показать элемент маршрута на панели навигации - PullRequest
Новая
       3

Верно или неверно, чтобы показать элемент маршрута на панели навигации

0 голосов
/ 16 июня 2020

Я создаю веб-сайт и использую v vue с vue -router. Компонент My Navbar выполняет итерацию по элементу routes и получает все маршруты для отображения на панели навигации, поэтому я могу просто добавлять и удалять маршруты, не изменяя компонент панели навигации. Теперь я хочу, например, чтобы уведомление о защите данных или юридическое уведомление не отображалось.

Я попытался решить эту проблему с помощью логического и v-if. У вас есть идеи, как решить эту проблему?

Мой код выглядит следующим образом:

Компонент панели навигации: 

<template>
  <div>
    <div class="mdheader"></div>
    <div class="md-layout-item">
      <md-tabs md-sync-route class="md-primary" md-alignment="centered">
        <div
          v-for="r in this.$router.options.routes"
          :key="r.name"
          :v-if="r.showOnBar"
        >
          <md-tab :md-label="r.name" :to="r.path" exact></md-tab>
        </div>
      </md-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar"
};
</script>

router / index. js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 16 июня 2020

Вам нужно обернуть свои свойства пользовательского маршрута в meta, как указано в ответе BroiSatse.

Однако другая проблема заключается в том, что вы использовали :v-if (т.е. вы связали v-if атрибут) вместо использования v-if. v-if уже оценивает условие в значении как согласно документации .

Вот песочница, с которой можно поиграть: https://codesandbox.io/s/stack-overflow-q-62409392-6zovw?file= / src / router / index. js

0 голосов
/ 16 июня 2020

Вы очень близко, но вам нужно обернуть свое настраиваемое свойство в мета-параметр: 

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")
  }
];

и получить к нему доступ через route.meta.showOnBar. Имейте в виду, что вам нужно определить его только для маршрутов, которые вы хотите отображать на панели навигации.

...