背景：

最近在使用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展示了