vue-pure-admin动态路由无Layout实现解决方案

背景：

最近在使用vue-pure-admin开发后台项目的时候发现作者并没有动态路由的全屏无Layout实现方案。查询作者路由发现，作者只做了静态路由的无Layout方案，其它动态路由，作者在做整合的时候，都放进了 \ 下面的子路由，\ 即Layout路由。于是我开启了如何修改路由生成，来支持动态路由的无Layout实现

步骤一、定义路由modules文件

例如为不需要Layout的路由添加 isLayout:true，同时针对特定页面的子路由添加 showNoLayoutComponent:true，解决组件查找到非index.vue文件的错误问题。

export default {path: "/statistics",name: "StatisticAnalysis",redirect: "/statistics/large_screen",meta: {icon: "changzhanguanli2",title: "统计分析",isLayout: true,rank: 8},children: [{path: "/statistics/large_screen",name: "RealTimeScreen",redirect: "/statistics/large_screen/real_time_screen",meta: {title: "实时大屏",isLayout: true},auth: true,children: [{path: "/statistics/large_screen/real_time_screen",name: "RealTimeScreen",component: () =>import("@/views/statistics/large_screen/real_time_screen/Home.vue"),auth: true,meta: {title: "实时大屏",isLayout: true,showNoLayoutComponent: true}}]}]
} as RouteConfigsTable;

步骤二、处理动态路由生成

a.找到做做生成routes的地方 函数 router\utils.ts 的函数 handleAsyncRoutes 作者在此处进行了路由的添加，导致全部都被添加进Layout下面，导致无法在Layout之外

function handleAsyncRoutes(routeList) {if (routeList.length === 0) {usePermissionStoreHook().handleWholeMenus(routeList);} else {function filterRoutes(routes, permissions) {return routes.reduce((acc, route) => {// 过滤当前路由if (!route.auth) {const filteredRoute = cloneDeep(route); // 复制当前路由// 如果有子路由，则递归过滤子路由if (route.children) {filteredRoute.children = filterRoutes(route.children, permissions);}acc.push(filteredRoute);} else if (route.name && permissions.includes(route.name)) {const filteredRoute = { ...route }; // 复制当前路由// 如果有子路由，则递归过滤子路由if (route.children) {filteredRoute.children = filterRoutes(route.children, permissions);}acc.push(filteredRoute);}return acc;}, []);}formatFlatteningRoutes(addAsyncRoutes(hasPermissionPage)).map((v: RouteRecordRaw) => {// 防止重复添加路由if (router.options.routes[0].children.findIndex(value => value.path === v.path) !== -1) {return;} else {router.options.routes[0].children.push(v);ascending(router.options.routes[0].children);if (!router.hasRoute(v?.name)) router.addRoute(v);const flattenRouters: any = router.getRoutes().find(n => n.path === "/");router.addRoute(flattenRouters);}});usePermissionStoreHook().handleWholeMenus(hasPermissionPage);}if (!useMultiTagsStoreHook().getMultiTagsCache) {useMultiTagsStoreHook().handleTags("equal", [...routerArrays,...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)]);}addPathMatch();
}

 b.我们只需将对于的无Layout文件处理一下，单独加入routes就行，将else中代码进行改造即可

else {/* router.options.routes[0].children.push(v);// 最终路由进行升序ascending(router.options.routes[0].children);if (!router.hasRoute(v?.name)) router.addRoute(v);const flattenRouters: any = router.getRoutes().find(n => n.path === "/");router.addRoute(flattenRouters); */// 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转if (!v.meta?.isLayout) {// 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转router.options.routes[0].children.push(v);// 最终路由进行升序ascending(router.options.routes[0].children);if (!router.hasRoute(v?.name)) router.addRoute(v);const flattenRouters: any = router.getRoutes().find(n => n.path === "/");router.addRoute(flattenRouters);} else {if (v.meta.showNoLayoutComponent) {router.options.routes.splice(1, 0, v);if (!router.hasRoute(v?.name)) router.addRoute(v);}}}}

c.现在就可以进行无Layout展示了