vue3前端动态路由导航菜单

在Vue 3前端项目中，实现动态路由导航菜单的思路是，在系统提供默认的路由后，登录后读取菜单/路由数据进行加载。可能会出现默认路由与动态路由有重叠的情况，解决方法是覆盖。菜单与路由数据可以合并为一个数据结构。

一般来说，前端项目中的路由需要动态注册。因为菜单可能在管理系统中维护，还需要与权限绑定。用户登录后，需要动态展示菜单。菜单通常与路由相关联，因此，路由需要动态注册。

具体实现的步骤如下：
1. 创建一个名为setup.js的文件，用于组装路由和菜单。
2. 导入默认路由和统一命名的首页路由项。
3. 导入具体业务系统的路由。
4. 在导出的函数中，获取动态路由。可以从指定文件加载或从后端获取。
5. 对齐首页路由项，即使默认路由与业务路由的首页保持一致的命名。
6. 遍历动态路由项，并使用router.addRoute()方法添加动态路由。

下面是一个示例代码：

import fixItems from "./default"; // 默认路由
import { HomeName } from "./default"; // 统一命名首页路由项
import projectItems from "@/modules/router"; // 具体业务系统的路由

export default (router) => {
  // 获取动态路由
  const dynaItems = getDynamicItems();

  // 对齐首页路由项
  adpatHome(HomeName, dynaItems);

  // 添加动态路由
  dynaItems.forEach((value) => {
    router.addRoute(value);
  });
};

const getDynamicItems = () => {
  /* 获取动态路由，从指定文件加载或从后端获取 */
  return projectItems;
};

// 默认路由与业务路由对齐首页的路由信息
// 所谓对齐，就是大家的name保持一致，这样才能保证动态加入的路由项，覆盖掉前面的path和name相同的路由
const adpatHome = (HomeName, dynaItems) => {
  let home = dynaItems.filter((item) => {
    return item.path === "/";
  });

  if (home.length > 0 && home