Vue Router元字段

Question

我在想，是否可以在传递路由给VueRouter时定义自定义属性。例如，对于我的应用程序中的大多数路由，我想定义一个如下所示的路由，其中我可以将组件传递到可选属性“menu”中：

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

阅读文档可以发现使用meta字段，但这并不能实现我想要的结果，并导致路由更冗长。查看代码，传递给VueRouter的每个路由都是RouteConfig类型。是否可能修改VueRouter，以便可以传递具有附加属性的不同类型的RouteConfig路由？

- MJ_Wales

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

特别是在beforeMount中使用的forEach可以成为解决方案来构建菜单，例如基于在meta对象中定义的角色。

- Markus Madeja

---

感谢您的回复。我已经为您点赞，但是还没有接受您的答案，因为它不符合我的要求。我想使用特定类型组件的属性，原因之一是它可以保证类型安全，而 meta 可以接受任何类型。 - MJ_Wales

如果您想在应用程序中使 meta 具有类型安全性，可以定义一个自定义的应用程序特定的 RouteConfig，该 RouteConfig 为您要在 meta 属性中定义的字段定义了一个特定的类型。例如：import { RouteConfig } from 'vue-router'...export type MyAppRouteConfig = Omit<RouteConfig，'meta'> & { meta: { property1: string, property2: number, ... } }缺点是您必须在整个应用程序中引用此类型，而不是直接从 vue-router 导入 RouteConfig。 - dill

Answer 2

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

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

- dill