实现通用路由菜单的一种方式

将路由数组引入后进行遍历,自行迭代,即可展示需要的菜单选项

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

是不是非常简单呢!