✨ dynamic loading vue components

tookbra · May 10, 2019 · 0b8733d · 0b8733d
1 parent 5901363
commit 0b8733d
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 29 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,5 +1,4 @@
 import ExceptionPage from "@/components/exception";
 import BasicLayout from "@/components/layout/basic-layout";
-// import NavTab from "@/components/layout/navtab";
 
 export { ExceptionPage, BasicLayout };
diff --git a/src/components/layout/basic-layout.vue b/src/components/layout/basic-layout.vue
@@ -77,7 +77,7 @@ export default {
     }
   },
   created() {
-    this.menus = this.mainMenu.find(item => item.path === "/").children;
+    this.menus = this.mainMenu;
   },
   methods: {
     drawerClose() {

diff --git a/src/components/basic-container/index.vue → src/components/layout/page-layout.vue b/src/components/basic-container/index.vue → src/components/layout/page-layout.vue
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: "index"
+  name: "pageLayout"
 };
 </script>
 

diff --git a/src/components/login/user-login.vue b/src/components/login/user-login.vue
@@ -122,7 +122,7 @@ export default {
     },
     loginSuccess(res) {
       console.log(res);
-      this.$router.push({ name: "login" });
+      this.$router.push({ name: "home" });
     },
     requestFailed(err) {
       this.$notification["error"]({

diff --git a/src/main.js b/src/main.js
@@ -6,7 +6,7 @@ import store from "./store";
 import "./core/use";
 import "./permission";
 
-import basicContainer from "./components/basic-container/index";
+import basicContainer from "./components/layout/page-layout";
 
 if (process.env.NODE_ENV !== "production") require("@/mock");
 

diff --git a/src/mock/data/permission/super-admin.js b/src/mock/data/permission/super-admin.js
@@ -1,28 +1,21 @@
 export const superAdminPermission = [
   {
-    title: "首页",
-    key: "",
-    name: "index",
+    title: "系统管理",
+    key: "system",
+    icon: "setting",
     component: "BasicLayout",
     children: [
       {
-        title: "系统管理",
-        key: "system",
-        icon: "setting",
-        children: [
-          {
-            title: "租户管理",
-            key: "tenant"
-          },
-          {
-            title: "角色管理",
-            key: "roleList"
-          },
-          {
-            title: "权限管理",
-            key: "tableList"
-          }
-        ]
+        title: "租户管理",
+        key: "tenant"
+      },
+      {
+        title: "角色管理",
+        key: "roleList"
+      },
+      {
+        title: "权限管理",
+        key: "tableList"
       }
     ]
   }

diff --git a/src/router/dynamic-router.js b/src/router/dynamic-router.js
@@ -48,13 +48,24 @@ export const generatorDynamicRouter = () => {
  */
 export const generator = (routerMap, parent) => {
   return routerMap.map(item => {
+    if (item.component) {
+      console.log(222);
+    }
     const currentRouter = {
       // 路由地址 动态拼接生成如 /dashboard/workplace
       path: `${(parent && parent.path) || ""}/${item.key}`,
       // 路由名称，建议唯一
       name: item.name || item.key || "",
       // 该路由对应页面的 组件
-      component: constantRouterComponents[item.component || item.key],
+      component: item.component
+        ? constantRouterComponents[item.component || item.key]
+        : function(resolve) {
+            require([
+              `../views` +
+                `${(parent && parent.path) || ""}/${item.key}` +
+                `.vue`
+            ], resolve);
+          },
       // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
       meta: {
         title: item.title,
@@ -63,6 +74,7 @@ export const generator = (routerMap, parent) => {
         closeable: true
       }
     };
+    console.log(parent);
     // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
     currentRouter.path = currentRouter.path.replace("//", "/");
     // 重定向

diff --git a/src/router/router.js b/src/router/router.js
@@ -14,7 +14,7 @@ export const constantRouterMap = [
   {
     path: "/",
     component: BasicLayout,
-    redirect: "/home/index",
+    redirect: "/home",
     children: [
       {
         path: "home",

diff --git a/src/views/exception/403.vue b/src/views/exception/403.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { ExceptionPage } from "@/components/exception";
+import { ExceptionPage } from "@/components";
 
 export default {
   components: {

diff --git a/src/views/exception/500.vue b/src/views/exception/500.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {ExceptionPage} from "@/components/exception";
+import { ExceptionPage } from "@/components";
 
 export default {
   components: {