Vue 导航与 Vue 路由器：用户选择时的动态导航项

Question

我在 vue 中的 v-navigation 抽屉有问题。我使用 v-for 从 $router.options.routes 创建单独的菜单项。有些菜单项应始终显示（静态），有些菜单项（动态/条件）仅应在用户使用 v-select 进行相应选择后显示。我从商店中通过 mapState 获得选择，这是一个数组。我的问题是只有静态的一个或另一个有效。

我的方法是通过带有数组的元字段条目过滤路由。效果很好，只是静态菜单项没有出现在结果中。如果还没有选择任何内容，array.fillter 当然会返回一个空数组，因此没有菜单项。

路由示例

const routes = [
  {
    path: "/",
    name: "login",
    component: () => import("../views/Login"),
    meta: {}
  },
  {
    path: "/typeone",
    name: "typeone",
    component: () => import("../views/typeone"),
    meta: {
      requiresAuth: true,
      display: false,        // static entry in naviagtion, should always be shown
      title: "typeone",
      icon: "mdi-cogs mdi-fw"
    }
  },
  {
    path: "/typetwo",
    name: "typetwo",
    component: () => import("../views/typetwo"),
    meta: {
      requiresAuth: true,
      display: true,        // dynamic entry in naviagtion, should be shown upon user selection
      title: "typetwo",
      icon: "mdi-home-group mdi-fw"
    }
  },
  ...
];

NavigationDrawer 提取

<template>
  <v-navigation-drawer
    ...
  >
    <v-list
      nav
      :dense="dense"
      v-for="(route, index) in computedRoutes"
      :key="index"
    >
      <core-navigation-item :routesData="route" />
    </v-list>
  </v-navigation-drawer>
</template>

<script>
import CoreNavigationItem from "./CoreNavigationItem";
import { mapState } from "vuex";
...
computed: {
    ...mapState({
      productionType: state => state.productionType
    // this ist the array from the user selection, eg: ["typeone", "typetwo", ...]
    }),
computedRoutes() {
      // show just the static entries
      return this.$router.options.routes.filter((route) => route.meta.display === false);

      // show the dynamic entries only
      // return this.$router.options.routes.filter(item => this.productionType.includes(item.meta.title));

      // and this does not work
      // return this.$router.options.routes.filter(item => this.productionType.includes(item.meta.title) && item.meta.display === false);
    }

我还尝试对选择数组的更改做出反应并更改.meta.display 的值。

this.productionType.forEach((item) => this.$router.options.routes.find(val => val.meta.title === item).meta.display = false);

这适用于计算和监视，但它需要强制重新加载组件，以便在用户取消选择时不显示菜单项。

我完全被困在这里了。如果有人有想法或线索，我将不胜感激。

Answer 1

终于解决了。我在状态中映射了模式中的选择项，并将它们与实际选择的项进行匹配。因此，我在导航抽屉中构建了一个方法，获取所选项目和所选项目之间的差异。在 computedRoutes 中调用方法并根据元字段值进行过滤。

从 NavigationDrawer 提取的代码

  computed: {
    ...mapState({
      productionType: state => state.productionType,
      // selectable items
      items: state => state.schema.selectProductionType.items
    }),
    computedRoutes() {
      this.buildRoutes();
      return this.$router.options.routes.filter(
        route => route.meta.display === false
      );
    }
  },
  methods: {
    buildRoutes() {
      this.productionType.forEach(
        item =>
          (this.$router.options.routes.find(
            val => val.meta.title === item
          ).meta.display = false)
      );
      this.items
        .filter(item => !this.productionType.includes(item))
        .forEach(
          item =>
            (this.$router.options.routes.find(
              val => val.meta.title === item
            ).meta.display = true)
        );
    }
  }