vue3+vue-router+vite实现动态路由的全过程

[
  {
    path: "/application",
    name: "application",
    component: "Layout",
    title: "应用管理",
    show: true,
    icon: "",
    children: [
      {
        path: "",
        name: "application-index",
        component: "/application/index.vue",
      },
    ],
  },
  {
    path: "/permission",
    name: "permission",
    component: "Layout",
    title: "权限管理",
    show: true,
    icon: "",
    children: [
      {
        path: "menu",
        name: "permission-menu",
        component: "/permission/menu/index.vue",
        title: "菜单管理",
        show: true,
        icon: "",
      },
      {
        path: "user",
        name: "permission-user",
        component: "/permission/user/index.vue",
        title: "用户管理",
        show: true,
        icon: "",
      },
      {
        path: "role",
        name: "permission-role",
        component: "/permission/role/index.vue",
        title: "角色管理",
        show: true,
        icon: "",
      },
    ],
  },
]

router.addRoute({ path: '/permission', name: 'permission', component: () => import('xxxxx')})

router.addRoute('主路由的name', { path: 'settings', component: AdminSettings })

import router from "./index";
import { useSessionStorage } from "@vueuse/core";
import { StorageEnum } from "@/enum";
import { useUserStore } from "@/store";

const whiteList = ["/login", "/404"];

router.beforeEach(async (to) => {
  const token = useSessionStorage(StorageEnum.TOKEN, "").value;
  // 如果在白名单里面 并且 token 不存在
  if (whiteList.includes(to.path) && !token) {
    return true;
  } else {
    const { menuList, getMenuList } = useUserStore();
    // 如果为空数组，name就请求接口重新获取后端维护的路由数据
    if (!menuList.length) {
      await getMenuList();

      console.log("获取全部路由 =>", router.getRoutes());
      // 触发重定向 不这样写会导致刷新找不到路由 两种写法都行
      // return { path: to.fullPath };
      return to.fullPath;
    }
  }
});

{
 path: "/:pathMatch(.*)",
  name: "page404",
  component: () => import("@/views/system/404.vue"),
}

import type { RouterType } from "@/router/type";
import router from "@/router";
import type { RouteRecordRaw } from "vue-router";

export const useRouterConfig = () => {
	// 获取views目录下的所有的文件 不要使用@别名 
  const modules = import.meta.glob("../views/**");
  const asyncRoutes = ref<RouterType[]>([]);

  const addRoutes = (menus: RouterType[]) => {
    asyncRoutes.value = menus;
    filterAsyncRouter();
    // 动态添加 / 路由
    router.addRoute({
      path: "/",
      redirect: asyncRoutes.value[0].path,
    });
  };

  const filterAsyncRouter = () => {
    const routerLoop = (routes: RouterType[], ParentName?: string) => {
      routes.forEach((item) => {
        if (item.component === "Layout") {
          item.component = () => import("@/layout/index.vue");
        } else {
          item.component = resolveComponent(item.component);
        }
        const { title, show, icon, name, path, component, children } = item;
        const route: RouteRecordRaw = {
          component,
          path,
          name,
          meta: {
            title,
            show,
            icon,
          },
          children: children as any,
        };
		
		// 动态添加路由
        if (ParentName) {
          router.addRoute(ParentName, route);
        } else {
          router.addRoute(route);
        }

        if (item.children && item.children.length > 0) {
          routerLoop(item.children, item.name);
        }
      });
    };

    routerLoop(asyncRoutes.value);
  };

  const resolveComponent = (path: string) => {
    console.log(modules);
    // 拿到views下面的所有文件之后，动态拼接`key`去获取value
    const importPage = modules[`../views${path}`];
    if (!importPage) {
      throw new Error(
        `Unknown page ${path}. Is it located under Pages with a .vue extension?`
      );
    }
    return importPage;
  };

  return { addRoutes };
};