Метаполя Vue Router
Мне было интересно, можно ли определить пользовательские свойства при передаче маршрутов в VueRouter. Например, для большинства маршрутов в моем приложении я хотел бы определить маршрут, например следующий, где я могу передать компонент в необязательное свойство «меню»:
{ path: "/section-stack", component: SectionStack, menu: SectionMenu }
Чтение документы указывает на использование для этого метаполя, но это не дает того, чего я хочу, и приводит к более подробным маршрутам. Глядя на код, каждый маршрут, переданный VueRouter, имеет тип RouteConfig. Можно ли изменить мой VueRouter, чтобы ему можно было передавать маршруты другого типа? т.е. типа RouteConfig с дополнительными свойствами.
Ответы 2
Я думаю, что 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 может быть решением для создания меню, например. основан на ролях, определенных в метаобъекте.
Если вы хотите, чтобы meta был типобезопасен в вашем приложении, вы можете определить настраиваемый RouteConfig для конкретного приложения, который определяет определенный тип для ваших полей, которые вы хотите определить в свойстве meta. Например: import { RouteConfig } from 'vue-router' ... export type MyAppRouteConfig = Omit<RouteConfig, 'meta'> & { meta: { property1: string, property2: number, ... } } Недостаток этого вы должны ссылаться на этот тип во всем приложении, а не импортировать RouteConfig из vue-router напрямую. Извините, форматирование испорчено
Чтобы дополнить мой комментарий в первом ответе (форматирование не поддерживается в комментариях) и построить ответ Маркуса Мадейи, если вы хотите, чтобы свойство meta было типобезопасным, вы можете определить свой собственный расширяющий тип RouteConfig:
import { RouteConfig } from 'vue-router'
...
export type MyAppRouteConfig = Omit<RouteConfig, 'meta'> & {
meta: {
property1: string,
property2: number,
...
}
}
Спасибо за ваш ответ. Я проголосовал за вас, но не принял ваш ответ, так как это не то, что я ищу. Еще одна причина, по которой я хотел бы использовать определенное свойство типа Component, заключается в том, что оно будет безопасным для типов, где as meta принимает любой тип.