Typescript Vue路由器元字段

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

---

阅读指向为此使用元字段的点，但这并没有实现我想要的，并导致更详细的路由。查看代码，传递给VueRouter的每个路由都是RouteConfig类型。是否可以修改我的VueRouter，以便它可以通过不同类型的路由？即具有附加属性的RouteConfig类型。

我认为

meta

仍然是一条路要走。我曾经用它做了一个面包屑。我的路线是这样的：

路线：[
{
路径：“/”，
姓名：'家'，
组件：require（'./routes/Home.vue'），
元：{
历史：[]，
},
},
{
路径：'/projects'，
名称：'项目'，
组件：（）=>System.import（'./routes/Projects.vue'），
元：{
历史：[“家”]，
},
},
{
路径：'/project/:token'，
名称：'项目'，
组件：（）=>System.import（'./routes/project/Overview.vue'），
元：{
text：（vue）=>vue.projects[vue.$route.params.token]| | vue.$route.params.token，
到：{name:'project'，params:{token:（vue）=>vue.$route.params.token}，
历史：[“主页”、“项目”]，
}
]

在我的vue组件中，我可以通过观看

$route

来访问meta，同时通过迭代

$router

对象加载组件，如下所示：

导出默认值{
beforeMount（）{
this.allRoutes={}；
这是.router.options.routes.forEach（route=>{
if（route.name）{
让text=（route.meta&&route.meta.text）| | route.name；
this.$set（this.allRoutes，route.name{
文本：文本，
to：（route.meta&&route.meta.to）|{name:route.name}
}
);
}
}
);
},
数据（）{
返回{
所有路由：{}，
当前列表：[]，
};
},
观察：{
“$route”（到，从）{
this.currentList=（（to.meta&&to.meta.history）.slice（0）| |[]）；
this.currentList.push（to.name）；
}
},
}

---

尤其是

beforeMount

中的

forEach

可以作为构建菜单的解决方案，即f.e.基于元对象中定义的角色。

以补充第一个答案中的注释（注释中不支持格式）根据Markus Madeja的回答，如果您希望

meta

属性是类型安全的，您可以定义自己的自定义类型扩展

RouteConfig

：

从“vue路由器”导入{RouteConfig}
...
导出类型MyAppRouteConfig=省略&{
元：{
属性1：字符串，
物业2：编号，
...
}
}

谢谢你的回答。我已经投票给你了，但没有接受你的答案，因为这不是我想要的。我想使用类型组件的特定属性的另一个原因是，当meta接受任何类型时，它将是类型安全的。如果你想在你的应用程序中实现类型安全，你可以定义一个自定义的特定于应用程序的

RouteConfig

，它为要在

meta

属性中定义的字段定义特定类型。例如：从“vue路由器”导入{RouteConfig}，…导出类型MyAppRouteConfig=Omit&{meta:{property1:string，property2:number，}这样做的缺点是，您必须在整个应用程序中引用此类型，而不是直接从

vue路由器导入
RouteConfig
。抱歉，格式设置混乱
{ path: "/section-stack", component: SectionStack, menu: SectionMenu }