Vue3+vite addRoute动态路由刷新空白页面

最新推荐文章于 2024-03-11 16:14:35 发布

m0_46101540

最新推荐文章于 2024-03-11 16:14:35 发布

阅读量936

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_46101540/article/details/128084199

版权

Pinia

actions: {
    async ReTrigger() {
      let routes = await mapMenuToRouter(this.menu);
      for (const item of routes) {
        router.addRoute("main", item);
      }
    },
  },
//this.menu 后端菜单

vite动态加载组件+递归匹配权限组件

export async function mapMenuToRouter(useMenu) {
  const routes = [];
  const allRoutes = [];
  const routesFiltes = import.meta.glob("../router/main/**/*.js");
  for (const path in routesFiltes) {
    // routesFiltes[path]().then((mod) => {
    //   allRoutes.push(mod.default);
    // });
    let mod = await routesFiltes[path]();
    allRoutes.push(mod.default);
  }
  // console.log(allRoutes);
  // console.log(useMenu);
  const _recurseGetRoute = (useMenu) => {
    // console.log(useMenu);
    for (const menu of useMenu) {
      if (menu.type === 2) {
        const route = allRoutes.find((route) => {
          return route.path === menu.url
        });

        if (route) routes.push(route);
      } else {
        _recurseGetRoute(menu.children);
      }
    }
  };
  _recurseGetRoute(useMenu);
  return routes;
}

路由前置导航守卫

let hasRoles = true;
router.beforeEach(async (to, from) => {
  const store = useStore();
  let token = LoaclCache.getCache("token");
  let userMenus = LoaclCache.getCache("userMenus");
  if (to.path !== "/login") {
    if (token) {
      if (hasRoles) {
        await store.login.ReTrigger();
        hasRoles = false;
        return `${to.path}`;
        // router.push({...to})
      } else {
        return true;
      }
    } else {
      return "/login";
    }
  } else {
    return true;
  }
});
//记得添加404页面
{ path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },//动态路由报错，|| 匹配到404路由