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