lazy路由加载

src/components/Main.vue

@@ -1,27 +1,29 @@
 <template>
   <a-layout>
-    <a-layout-header style="height: 110px;">
+    <a-layout-header style="height: 110px">
       <a-row>
-        <a-col :span="12" style="color:white;">
+        <a-col :span="12" style="color: white">
           <span class="w-title">水质监测平台</span>
         </a-col>
         <a-col :span="2" :offset="10">
           <a-popover :title="username" trigger="hover" placement="bottom">
             <template slot="content">
-              <p v-if="!isAnyone" style="cursor: pointer;" @click="changePasswd">
+              <p v-if="!isAnyone" style="cursor: pointer" @click="changePasswd">
                 更改密码
               </p>
-              <p style="cursor: pointer;" @click="logout">
+              <p style="cursor: pointer" @click="logout">登出</p>
-                登出
-              </p>
             </template>
             <a-avatar :size="48" icon="user" />
           </a-popover>
-           
         </a-col>
       </a-row>
       <a-row>
-        <a-menu v-model="current" mode="horizontal" theme="dark" @click="handleMenuClick">
+        <a-menu
+          v-model="current"
+          mode="horizontal"
+          theme="dark"
+          @click="handleMenuClick"
+        >
           <a-menu-item key="map-layout">
             <icon-font type="wt-iconmap" />主页
           </a-menu-item>
@@ -29,7 +31,9 @@
             <span slot="title" class="submenu-title-wrapper"
               ><icon-font type="wt-iconsearch" />数据查询</span
             >
-            <a-menu-item key="detail-search"> <icon-font type="wt-iconxiangxi" />详细数据 </a-menu-item>
+            <a-menu-item key="detail-search">
+              <icon-font type="wt-iconxiangxi" />详细数据
+            </a-menu-item>
           </a-sub-menu>
           <a-menu-item key="analysis">
             <icon-font type="wt-iconfenxi" />图形分析
@@ -37,13 +41,12 @@
           <a-menu-item key="admin" v-if="isAdmin">
             <icon-font type="wt-iconhoutai" />后台管理
           </a-menu-item>
-
         </a-menu>
       </a-row>
     </a-layout-header>
     <a-layout-content>
-     <keep-alive exclude="map-layout">
+      <keep-alive>
-      <component :is="currentComp"/>
+        <router-view  />
       </keep-alive>
     </a-layout-content>
     <a-modal
@@ -52,69 +55,76 @@
       :destroyOnClose="true"
       :footer="null"
     >
-      <password-change
+      <password-change @ok="logout" @cancle="passwd_visible = false" />
-        @ok="logout"
-        @cancle="passwd_visible = false"
-      />
-      
     </a-modal>
   </a-layout>
 </template>
 
 <script>
+import IconFont from "@/components/icon";
+// import MapLayout from "@/components/map/Index";
+// import DetailSearch from "@/components/search/Index";
+// import Analysis from "@/components/analysis/Index";
 
-import IconFont from '@/components/icon'
+import Logs from "@/components/logs/Index";
-import MapLayout from '@/components/map/Index'
+import Admin from "@/components/admin/Index";
-import DetailSearch from '@/components/search/Index'
+import { logout } from "@/utils/http";
-import Analysis from '@/components/analysis/Index'
+import PasswordChange from "./admin/forms/PasswordChange.vue";
-
-import Logs from '@/components/logs/Index'
-import Admin from '@/components/admin/Index'
-import { logout } from '@/utils/http'
-import PasswordChange from './admin/forms/PasswordChange.vue'
 export default {
   components: {
-    'icon-font':IconFont,
+    "icon-font": IconFont,
-    'map-layout':MapLayout,
+    // "map-layout": MapLayout,
-    'detail-search':DetailSearch,
+    // "detail-search": DetailSearch,
-    'analysis':Analysis,
+    // analysis: Analysis,
     // 'logs':Logs,
-    'admin':Admin,
+    // admin: Admin,
-    PasswordChange
+    PasswordChange,
   },
   data() {
     return {
-      current:['map-layout'],
+      current: ["map-layout"],
-      currentComp: 'map-layout',
+      currentComp: "map-layout",
-      passwd_visible: false
+      passwd_visible: false,
     };
   },
+  watch:{
+    currentComp: function(old, newVal) {
+      this.$router.push({
+        name: this.currentComp
+      })
+    }
+  },
   computed: {
     isAdmin() {
-      return this.$store.getters.isSuper || this.$store.getters.isProject
+      return this.$store.getters.isSuper || this.$store.getters.isProject;
     },
     isAnyone() {
-      return this.$store.getters.isAnyone
+      return this.$store.getters.isAnyone;
     },
     username() {
-      return this.$store.getters.username
+      return this.$store.getters.username;
-    }
+    },
   },
   methods: {
-    handleMenuClick({item, key, keyPath}) {
+    handleMenuClick({ item, key, keyPath }) {
-      this.currentComp = key
+      this.currentComp = key;
     },
     logout() {
-      logout()
+      logout();
-      sessionStorage.clear()
+      sessionStorage.clear();
-      this.$store.commit('logout')
+      this.$store.commit("logout");
       this.$router.push({
-        path: '/login'
+        path: "/login",
-      })
+      });
     },
     changePasswd() {
-      this.passwd_visible = true
+      this.passwd_visible = true;
-    }
+    },
+  },
+  mounted() {
+    // this.$router.push({
+    //   name:this.currentComp
+    // })
   }
 };
 </script>
@@ -126,11 +136,10 @@ export default {
 .ant-layout-content {
   height: calc(100vh - 110px);
 }
-.w-title{
+.w-title {
   color: white;
   line-height: 50px;
   font-size: 24px;
   font-weight: 600;
-
 }
 </style>

src/utils/router.js

@@ -4,8 +4,16 @@ import Index from '@/components/Main'
 import Login from '@/components/Login'
 import store from './store'
 import { setAuth } from './http'
+
 Vue.use(Router)
 
+const funcRoutes = [
+    { path:'map-layout', name:'map-layout', component: ()=>import(/* webpackChunkName: "map-layout" */ '@/components/map/Index' ) },
+    { path:'detail-search', name:'detail-search', component: ()=>import(/* webpackChunkName: "detail-search" */ '@/components/search/Index' ) },
+    { path:'admin', name:'admin', component: ()=>import(/* webpackChunkName: "admin" */ '@/components/admin/Index' ) },
+    { path:'analysis', name:'analysis', component: ()=>import(/* webpackChunkName: "analysis" */ '@/components/analysis/Index' ) },
+]
+
 const routes = [
     {
         path: '/',
@@ -14,7 +22,8 @@ const routes = [
     {
         path: '/index',
         name: 'index',
-        component: Index,
+        component: () => import(/* webpackChunkName: "index" */ '@/components/Main'),
+        children: funcRoutes,
         meta: {
             requireAuth: true
         }