vue3 多级动态路由
vue3 多级动态路由
·
vue 多级动态路由
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import store from "@/store";
import { getToken } from "@/utils/auth";
const routes: Array<RouteRecordRaw> = [
{
path: "/login",
name: "Login",
component: () => import("@/views/login/index.vue"),
},
{
path: "/layout",
name: "layout",
component: () => import("@/layout/index.vue"),
children: [
{
path: "/403",
name: "404",
component: () => import("@/views/exception/403.vue"),
},
{
path: "/404",
name: "404",
component: () => import("@/views/exception/404.vue"),
},
{
path: "/500",
name: "500",
component: () => import("@/views/exception/500.vue"),
},
{
path: "/home",
name: "首页",
component: () => import("@/views/home/index.vue"),
},
],
},
{
path: "/",
name: "/",
redirect: "/login",
},
{
path: "/:pathMatch(.*)",
redirect: "/404",
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
var isF = false; //这个是用于判断动态路由是否已经被获取
router.beforeEach(async (to, from) => {
if (to.path == "/login") {
return true;
}
if (!getToken()) {
return { path: "/login" };
} else {
if (isF) {
return true;
} else {
let add = store.getters.menuList || "";
routerData(add);
isF = true;
return { ...to, replace: true };
}
}
});
const routerData = (result: any) => {
let currenRoutes = router.options.routes;
if (result) {
result.forEach((item: any) => {
// has用于判断当前路由中是否已经具有,避免重复
var has = currenRoutes.some((it) => it.path == item.path);
if (!has) {
currenRoutes.push({
path: `${item.url}`,
name: item.name,
meta: {
title: item.name,
},
component: () => import(`@/views${item.url}`),
});
router.addRoute("layout", {
path: `${item.url}`,
name: item.name,
meta: {
title: item.name,
},
component: () => import(`@/views${item.url}`),
});
}
if (item.children && item.children.length) {
routerData(item.children);
}
});
}
};
export default router;
更多推荐
已为社区贡献3条内容
所有评论(0)