vue3 动态路由搭建

代码如下

import { createRouter, createWebHistory, useRouter } from "vue-router";
// 引入路由表配置
import routes from "./routes";
// 引入接口
import { user_routers } from "../network/user";
const modules = import.meta.glob("../views/**/*.vue");
console.log(modules);
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    //滚动行为
    // return 期望滚动到哪个的位置
    if (savedPosition) {
      return savedPosition;
    } else {
      return { left: 0, top: 0 };
    }
  },
});

// 路由前置守卫
//白名单
let whiteList = ["/login", "/not-found"];
let menu: any;
router.beforeEach(async (to, from) => {
  console.log(to.path);
  let token = localStorage.getItem("_token");
  //未登录
  if (!token) {
    //检测白名单
    if (whiteList.indexOf(to.path) == -1) {
      // 不在白名单,则去login
      return { path: "/login" };
    }
  } else {
    //已登录
    if (to.path == "/login") {
      return { path: "/" };
    }

    // 获取动态菜单
    if (!menu) {
      let res = await user_routers();
      localStorage.setItem("_menu", JSON.stringify(res.data));
      menu = res.data;
      //解析数据
      let menuList = PatterMenu(res.data);
      for (let i = 0; i < menuList.length; i++) {
        router.addRoute("admin", menuList[i]);
      }

      router.addRoute({
        path: "/not-found",
        component: () => import("../views/Not-found.vue"),
      });
      router.addRoute({
        path: "/:pathMatch(.*)*",
        component: () => import("../views/Not-found.vue"),
      });
      return { path: to.path };
    }
  }
});

// 解析路由数据--获取没有子集的路由
function PatterMenu(list: any) {
  let arr: any = [];
  // 递归解析路由表
  function routesArr(args: any) {
    args &&
      args.length &&
      args.forEach((item: any, index: number) => {
        if (!item.children) {
          arr.push({
            path: `${item.path}`,
            component: loadView(item.component),
            meta: item.meta,
            name: item.name,
          });
        } else {
          // 有子集便处理子集
          routesArr(item.children);
        }
      });
  }
  // 默认调用
  routesArr(list);
  return arr;
}
// 路由组件懒加载方法
function loadView(path: any) {
  return modules[`../views/${path}.vue`];
}
export default router;