Question

我在vue中的v导航抽屉有问题。我从计算得出的$ router.options.routes中使用v-for创建单个菜单项。有些菜单项应始终显示（静态），而某些菜单项（动态/有条件）应仅在用户使用v-select做出相应选择后才显示。我通过商店中的mapState获得选择，这是一个数组。我的问题是，只有静态的一个或另一个可以起作用。

我的方法是通过带有数组的meta字段条目过滤路由。除了静态菜单项不会出现在结果中之外，它的效果非常好。如果尚未选择任何内容，则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

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

从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)
        );
    }
  }

使用Vue路由器的Vue导航：用户选择后的动态导航项目

1 个答案: