vue3实现动态路由及菜单

/**
 * 默认路由
 * 具体业务路由，应在src/modules/router里定义，或者从后端动态加载
 */
export default [
  /**
   * 路由项结构：
   *{
      path: "/",//路径，（必选；path、name、component是路由规定必选的元素）
                  也可以带参数，如 path: "/resource/detail/:id",
      name: "路由名称，是路由唯一标识",（必选）
      component: 指向组件，如 Home,或者() => import("../views/login/PageIndex.vue")，（必选）
      meta: {//meta里的属性可以自定义，全部为可选项
        text: "名称",//展示在菜单里，（可选）
        navi: true, //导航条(一级菜单)，（可选）
        noLogin: true, //无须登录即可浏览，（可选）
        access: "work:sysmanage,work:resourcemanage",//权限标识，（可选）
      },
      children: [],
    },
   */
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/PageIndex.vue"),
    meta: {
      noLogin: true, //无须登录即可浏览
    },
  },
  {
    path: "/",
    name: "Home",
    component: () => import("../views/PageIndex.vue"),
  },
  {
    path: "/notAllow",
    name: "notAllow",
    component: () => import("../views/sys/notAllow.vue"),
  },
];

export const HomeName = "Home";

import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./default";
import routeAssembler from "./setup";
import { hasAuthority } from "@/utils/login.js";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
let registerRouteFresh = true;//是否还没有动态加载过
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.isLogin ? true : false;
  if (isLogin) {
    //已登录情况下验证权限
    let isAccess = hasAuthority(to.meta.access);
    if (!isAccess) {//没有权限
      next("/notAllow");
      return;
    }
    if (registerRouteFresh) {//还没有动态加载过
      //动态注册路由 <----------------------------------------
      routeAssembler(router);
      registerRouteFresh = false;
      next({ ...to, replace: true });
    } else {
      //已经登录了，不能再打开登录页
      to.path === "/login" ? next("home") : next();
    }
  } else {
    //如果无须登录则直接打开，否则转向登录页面
    to.meta.noLogin || to.path === "/login" ? next() : next("/login");
  }
});

export default router;

/*
  装配路由及菜单
 */
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[0].name !== HomeName) {
    /**
     * 如果业务路由定义了首页，但其name与默认路由首页的name不相同
     * 则将业务路由中首页项的name置为默认名称
     * 因为按照vue-router的规则，addRoute的时候，如果存在同名同路径的路由项，则覆盖之
     * 我们要的就是覆盖默认，以业务路由设置为准
     */
    home[0].name = HomeName;
  }
};