🔥🔥🔥完善路由后端渲染方案，弃用之前写法

mock/controller/router.js

@@ -7,7 +7,7 @@ const data = [
       {
         path: "index",
         name: "Index",
-        component: "views/index/index",
+        component: "@/views/index/index",
         meta: {
           title: "首页",
           icon: "home",
@@ -25,7 +25,7 @@ const data = [
       {
         path: "personalCenter",
         name: "PersonalCenter",
-        component: "views/personalCenter/index",
+        component: "@/views/personalCenter/index",
         meta: {
           title: "个人中心",
         },
@@ -42,19 +42,19 @@ const data = [
       {
         path: "userManagement",
         name: "UserManagement",
-        component: "views/personnelManagement/userManagement/index",
+        component: "@/views/personnelManagement/userManagement/index",
         meta: { title: "用户管理" },
       },
       {
         path: "roleManagement",
         name: "RoleManagement",
-        component: "views/personnelManagement/roleManagement/index",
+        component: "@/views/personnelManagement/roleManagement/index",
         meta: { title: "角色管理" },
       },
       {
         path: "menuManagement",
         name: "MenuManagement",
-        component: "views/personnelManagement/menuManagement/index",
+        component: "@/views/personnelManagement/menuManagement/index",
         meta: { title: "菜单管理", badge: "New" },
       },
     ],
@@ -70,7 +70,7 @@ const data = [
       {
         path: "permissions",
         name: "Permission",
-        component: "views/vab/permissions/index",
+        component: "@/views/vab/permissions/index",
         meta: {
           title: "权限控制",
           permissions: ["admin", "editor"],
@@ -90,19 +90,19 @@ const data = [
           {
             path: "awesomeIcon",
             name: "AwesomeIcon",
-            component: "views/vab/icon/index",
+            component: "@/views/vab/icon/index",
             meta: { title: "常规图标" },
           },
           {
             path: "remixIcon",
             name: "RemixIcon",
-            component: "views/vab/icon/remixIcon",
+            component: "@/views/vab/icon/remixIcon",
             meta: { title: "小清新图标" },
           },
           {
             path: "colorfulIcon",
             name: "ColorfulIcon",
-            component: "views/vab/icon/colorfulIcon",
+            component: "@/views/vab/icon/colorfulIcon",
             meta: { title: "多彩图标" },
           },
         ],
@@ -120,13 +120,13 @@ const data = [
           {
             path: "comprehensiveTable",
             name: "ComprehensiveTable",
-            component: "views/vab/table/index",
+            component: "@/views/vab/table/index",
             meta: { title: "综合表格" },
           },
           {
             path: "inlineEditTable",
             name: "InlineEditTable",
-            component: "views/vab/table/inlineEditTable",
+            component: "@/views/vab/table/inlineEditTable",
             meta: { title: "行内编辑" },
           },
         ],
@@ -134,44 +134,44 @@ const data = [
       {
         path: "map",
         name: "Map",
-        component: "views/vab/map/index",
+        component: "@/views/vab/map/index",
         meta: { title: "地图", permissions: ["admin"], badge: "Pro" },
       },
       {
         path: "webSocket",
         name: "WebSocket",
-        component: "views/vab/webSocket/index",
+        component: "@/views/vab/webSocket/index",
         meta: { title: "webSocket", permissions: ["admin"] },
       },
       {
         path: "form",
         name: "Form",
-        component: "views/vab/form/index",
+        component: "@/views/vab/form/index",
         meta: { title: "表单", permissions: ["admin"] },
       },
       {
         path: "element",
         name: "Element",
-        component: "views/vab/element/index",
+        component: "@/views/vab/element/index",
         meta: { title: "常用组件", permissions: ["admin"] },
       },
       {
         path: "tree",
         name: "Tree",
-        component: "views/vab/tree/index",
+        component: "@/views/vab/tree/index",
         meta: { title: "树", permissions: ["admin"] },
       },
       {
         path: "card",
         name: "Card",
-        component: "views/vab/card/index",
+        component: "@/views/vab/card/index",
         meta: { title: "卡片", permissions: ["admin"] },
       },
 
       {
         path: "betterScroll",
         name: "BetterScroll",
-        component: "views/vab/betterScroll/index",
+        component: "@/views/vab/betterScroll/index",
         meta: {
           title: "滚动侦测",
           permissions: ["admin"],
@@ -180,12 +180,12 @@ const data = [
       {
         path: "verify",
         name: "Verify",
-        component: "views/vab/verify/index",
+        component: "@/views/vab/verify/index",
         meta: { title: "验证码", permissions: ["admin"] },
       },
       {
         path: "menu1",
-        component: "views/vab/nested/menu1/index",
+        component: "@/views/vab/nested/menu1/index",
         name: "Menu1",
         alwaysShow: true,
         meta: {
@@ -198,14 +198,14 @@ const data = [
             name: "Menu1-1",
             alwaysShow: true,
             meta: { title: "嵌套路由 1-1" },
-            component: "views/vab/nested/menu1/menu1-1/index",
+            component: "@/views/vab/nested/menu1/menu1-1/index",
 
             children: [
               {
                 path: "menu1-1-1",
                 name: "Menu1-1-1",
                 meta: { title: "嵌套路由 1-1-1" },
-                component: "views/vab/nested/menu1/menu1-1/menu1-1-1/index",
+                component: "@/views/vab/nested/menu1/menu1-1/menu1-1-1/index",
               },
             ],
           },
@@ -214,105 +214,105 @@ const data = [
       {
         path: "magnifier",
         name: "Magnifier",
-        component: "views/vab/magnifier/index",
+        component: "@/views/vab/magnifier/index",
         meta: { title: "放大镜", permissions: ["admin"] },
       },
       {
         path: "echarts",
         name: "Echarts",
-        component: "views/vab/echarts/index",
+        component: "@/views/vab/echarts/index",
         meta: { title: "图表", permissions: ["admin"] },
       },
 
       {
         path: "loading",
         name: "Loading",
-        component: "views/vab/loading/index",
+        component: "@/views/vab/loading/index",
         meta: { title: "loading", permissions: ["admin"] },
       },
       {
         path: "player",
         name: "Player",
-        component: "views/vab/player/index",
+        component: "@/views/vab/player/index",
         meta: { title: "视频播放器", permissions: ["admin"] },
       },
       {
         path: "markdownEditor",
         name: "MarkdownEditor",
-        component: "views/vab/markdownEditor/index",
+        component: "@/views/vab/markdownEditor/index",
         meta: { title: "markdown编辑器", permissions: ["admin"] },
       },
       {
         path: "editor",
         name: "Editor",
-        component: "views/vab/editor/index",
+        component: "@/views/vab/editor/index",
         meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
       },
       {
         path: "qrCode",
         name: "QrCode",
-        component: "views/vab/qrCode/index",
+        component: "@/views/vab/qrCode/index",
         meta: { title: "二维码", permissions: ["admin"] },
       },
       {
         path: "backToTop",
         name: "BackToTop",
-        component: "views/vab/backToTop/index",
+        component: "@/views/vab/backToTop/index",
         meta: { title: "返回顶部", permissions: ["admin"] },
       },
       {
         path: "lodash",
         name: "Lodash",
-        component: "views/vab/lodash/index",
+        component: "@/views/vab/lodash/index",
         meta: { title: "lodash", permissions: ["admin"] },
       },
       {
         path: "imgComparison",
         name: "ImgComparison",
-        component: "views/vab/imgComparison/index",
+        component: "@/views/vab/imgComparison/index",
         meta: { title: "图像拖拽比对", permissions: ["admin"] },
       },
       {
         path: "codeGenerator",
         name: "CodeGenerator",
-        component: "views/vab/codeGenerator/index",
+        component: "@/views/vab/codeGenerator/index",
         meta: { title: "代码生成机", permissions: ["admin"] },
       },
       {
         path: "markdown",
         name: "Markdown",
-        component: "views/vab/markdown/index",
+        component: "@/views/vab/markdown/index",
         meta: { title: "markdown阅读器", permissions: ["admin"] },
       },
       {
         path: "smallComponents",
         name: "SmallComponents",
-        component: "views/vab/smallComponents/index",
+        component: "@/views/vab/smallComponents/index",
         meta: { title: "小组件", permissions: ["admin"] },
       },
 
       {
         path: "upload",
         name: "Upload",
-        component: "views/vab/upload/index",
+        component: "@/views/vab/upload/index",
         meta: { title: "上传", permissions: ["admin"] },
       },
       {
         path: "sticky",
         name: "Sticky",
-        component: "views/vab/sticky/index",
+        component: "@/views/vab/sticky/index",
         meta: { title: "sticky吸附", permissions: ["admin"] },
       },
       {
         path: "log",
         name: "Log",
-        component: "views/vab/errorLog/index",
+        component: "@/views/vab/errorLog/index",
         meta: { title: "错误日志模拟", permissions: ["admin"] },
       },
       {
         path: "more",
         name: "More",
-        component: "views/vab/more/index",
+        component: "@/views/vab/more/index",
         meta: { title: "更多组件", permissions: ["admin"] },
       },
     ],
@@ -332,7 +332,7 @@ const data = [
       {
         path: "pay",
         name: "Pay",
-        component: "views/mall/pay/index",
+        component: "@/views/mall/pay/index",
         meta: {
           title: "支付",
           noKeepAlive: true,
@@ -342,7 +342,7 @@ const data = [
       {
         path: "goodsList",
         name: "GoodsList",
-        component: "views/mall/goodsList/index",
+        component: "@/views/mall/goodsList/index",
         meta: {
           title: "商品列表",
         },
@@ -350,7 +350,7 @@ const data = [
       {
         path: "goodsDetail",
         name: "GoodsDetail",
-        component: "views/mall/goodsDetail/index",
+        component: "@/views/mall/goodsDetail/index",
         meta: {
           title: "商品详情",
         },
@@ -367,13 +367,13 @@ const data = [
       {
         path: "401",
         name: "Error401",
-        component: "views/401",
+        component: "@/views/401",
         meta: { title: "401" },
       },
       {
         path: "404",
         name: "Error404",
-        component: "views/404",
+        component: "@/views/404",
         meta: { title: "404" },
       },
     ],

src/store/modules/routes.js

@@ -4,7 +4,7 @@
  */
 import { asyncRoutes, constantRoutes } from "@/router";
 import { getRouterList } from "@/api/router";
-import { filterAllRoutes, filterAsyncRoutes } from "@/utils/handleRoutes";
+import { convertRouter, filterAsyncRoutes } from "@/utils/handleRoutes";
 
 const state = { routes: [], partialRoutes: [] };
 const getters = {
@@ -35,7 +35,7 @@ const actions = {
   async setAllRoutes({ commit }) {
     let { data } = await getRouterList();
     data.push({ path: "*", redirect: "/404", hidden: true });
-    let accessRoutes = filterAllRoutes(data);
+    let accessRoutes = convertRouter(data);
     commit("setAllRoutes", accessRoutes);
     return accessRoutes;
   },

src/utils/handleRoutes.js

@@ -4,8 +4,8 @@
  * @param constantRoutes
  * @returns {*}
  */
-export function filterAllRoutes(constantRoutes) {
-  return constantRoutes.filter((route) => {
+export function convertRouter(asyncRoutes) {
+  return asyncRoutes.map((route) => {
     if (route.component) {
       if (route.component === "Layout") {
         route.component = (resolve) => require(["@/layouts"], resolve);
@@ -13,29 +13,16 @@ export function filterAllRoutes(constantRoutes) {
         route.component = (resolve) =>
           require(["@/layouts/EmptyLayout"], resolve);
       } else {
-        let path = "views/" + route.component;
-        if (
-          new RegExp("^/views/.*$").test(route.component) ||
-          new RegExp("^views/.*$").test(route.component)
-        ) {
-          path = route.component;
-        } else if (new RegExp("^/.*$").test(route.component)) {
-          path = "views" + route.component;
-        } else if (new RegExp("^@views/.*$").test(route.component)) {
-          path = route.component.slice(1);
-        } else {
-          path = "views/" + route.component;
-        }
+        const index = route.component.indexOf("views");
+        const path =
+          index > 0 ? route.component.slice(index) : `views/${route.component}`;
         route.component = (resolve) => require([`@/${path}`], resolve);
       }
     }
-    if (route.children && route.children.length) {
-      route.children = filterAllRoutes(route.children);
-    }
-    if (route.children && route.children.length === 0) {
-      delete route.children;
-    }
-    return true;
+    if (route.children && route.children.length)
+      route.children = convertRouter(route.children);
+    if (route.children && route.children.length === 0) delete route.children;
+    return route;
   });
 }