Question

我想知道是否有可能在将路由传递到VueRouter时定义自定义属性。例如，对于我的应用程序中的大多数路线，我想定义一条路线，例如以下，我可以将组件传递给可选属性“菜单”：

{ path: "/section-stack", component: SectionStack, menu: SectionMenu }

阅读docs指向为此使用meta字段，但这不能达到我想要的效果，并且会导致更冗长的路由。查看代码，传递到VueRouter的每个路由的类型均为RouteConfig。是否可以修改我的VueRouter，以便可以传递其他类型的路由？即具有附加属性的RouteConfig类型。

Answer 1

我认为meta仍然是要走的路。我曾经用它创建一个面包屑。我的路线看起来像这样：

  routes: [
    {
      path: '/',
      name: 'home',
      component: require('./routes/Home.vue'),
      meta: {
        history: [],
      },
    },
    {
      path: '/projects',
      name: 'projects',
      component: () => System.import('./routes/Projects.vue'),
      meta: {
        history: ['home'],
      },
    },
    {
      path: '/project/:token',
      name: 'project',
      component: () => System.import('./routes/project/Overview.vue'),
      meta: {
        text: (vue) => vue.projects[vue.$route.params.token] || vue.$route.params.token,
        to: { name: 'project', params: { token: (vue) => vue.$route.params.token } } ,
        history: ['home', 'projects'],
    }
  ]

在我的vue组件中，我可以通过观看$route来访问元，并在迭代过程中通过遍历$router对象的方式加载组件，如下所示：

export default {
    beforeMount() {
      this.allRoutes = {};
      this.$router.options.routes.forEach(route => {
          if (route.name) {
            let text = (route.meta && route.meta.text) || route.name;
            this.$set(this.allRoutes, route.name, {
                text: text,
                to: (route.meta && route.meta.to) || { name: route.name }
              }
            );
          }
        }
      );
    },
    data() {
      return {
        allRoutes: {},
        currentList: [],
      };
    },
    watch: {
      '$route'(to, from) {
        this.currentList = ((to.meta && to.meta.history).slice(0) || []);
        this.currentList.push(to.name);
      }
    },
  }

特别是forEach中的beforeMount可能是构建菜单的解决方案，例如基于元对象中定义的角色。

Answer 2

要补充我在第一个答案中的注释（注释中不支持格式）并以Markus Madeja的答案为基础，如果您希望meta属性是类型安全的，则可以定义自己的自定义类型扩展RouteConfig：

import { RouteConfig } from 'vue-router'
...
export type MyAppRouteConfig = Omit<RouteConfig, 'meta'> & {
  meta: {
    property1: string,
    property2: number,
    ...
  }
}

Vue路由器元字段

2 个答案: