实现通用路由菜单的一种方式
将路由数组引入后进行遍历,自行迭代,即可展示需要的菜单选项
<a-menu-item v-for="item in routes" :key="item.path">
{{ item.name }}
</a-menu-item>在通用布局中使用route-view渲染实际的页面内容,更加动态也更加灵活
<a-layout-content class="center">
<router-view />
</a-layout-content>一个简单的路由信息
{
path: "/",
name: "浏览题目",
component: HomeView,
},现在就可以愉快地进行动态路由菜单的展示了
再加上切换路由和高亮的钩子函数,大功告成
const selectedKeys = ref(["/"]);
const doMenuClick = (key: string) => {
router.push({
path: key,
});
};
// 路由跳转后，更新选中的菜单项
router.afterEach((to, from, failure) => {
selectedKeys.value = [to.path];
});是不是非常简单呢!