Небольшие переделки маршрутизации, рефакторинг

client/components/App.vue

@@ -36,7 +36,9 @@
         </el-aside>
 
         <el-main>
-            <router-view></router-view>
+            <keep-alive>
+                <router-view></router-view>
+            </keep-alive>
         </el-main>
     </el-container>
 </template>

client/components/CardIndex/CardIndex.vue

@@ -18,6 +18,7 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import _ from 'lodash';
 
+const rootRoute = '/cardindex';
 const tab2Route = [
     '/cardindex/search',
     '/cardindex/card',
@@ -30,10 +31,7 @@ export default @Component({
     watch: {
         selectedTab: function(newValue, oldValue) {
             lastActiveTab = newValue;
-            const t = Number(newValue);
+            this.setRouteByTab(newValue);
-            if (tab2Route[t] !== this.curRoute) {
-                this.$router.replace(tab2Route[t]);
-            }
         },
         curRoute: function(newValue, oldValue) {
             this.setTabByRoute(newValue);
@@ -45,14 +43,23 @@ class CardIndex extends Vue {
 
     mounted() {
         this.setTabByRoute(this.curRoute);
-        if (lastActiveTab !== null)
-            this.selectedTab = lastActiveTab;
     }
 
     setTabByRoute(route) {
         const t = _.indexOf(tab2Route, route);
-        if (t >= 0 && t !== this.selectedTab) {
+        if (t >= 0) {
-            this.selectedTab = t.toString();
+            if (t !== this.selectedTab)
+                this.selectedTab = t.toString();
+        } else {
+            if (route == rootRoute && lastActiveTab !== null)
+                this.setRouteByTab(lastActiveTab);
+        }
+    }
+
+    setRouteByTab(tab) {
+        const t = Number(tab);
+        if (tab2Route[t] !== this.curRoute) {
+            this.$router.replace(tab2Route[t]);
         }
     }
 

client/router.js

@@ -4,13 +4,13 @@ import _ from 'lodash';
 
 import App from './components/App.vue';
 
-import CardIndex from './components/CardIndex/CardIndex.vue';
+const CardIndex = () => import('./components/CardIndex/CardIndex.vue');
-import Search from  './components/CardIndex/Search/Search.vue';
+const Search = () => import('./components/CardIndex/Search/Search.vue');
-import Card from  './components/CardIndex/Card/Card.vue';
+const Card = () => import('./components/CardIndex/Card/Card.vue');
-import Book from  './components/CardIndex/Book/Book.vue';
+const Book = () => import('./components/CardIndex/Book/Book.vue');
-import History from  './components/CardIndex/History/History.vue';
+const History = () => import('./components/CardIndex/History/History.vue');
 
-import Reader from './components/Reader/Reader.vue';
+const Reader = () => import('./components/Reader/Reader.vue');
 //const Forum = () => import('./components/Forum/Forum.vue');
 const Income = () => import('./components/Income/Income.vue');
 const Sources = () => import('./components/Sources/Sources.vue');
@@ -20,7 +20,7 @@ const NotFound404 = () => import('./components/NotFound404/NotFound404.vue');
 
 const myRoutes = [
     ['/', null, null, '/cardindex'],
-    ['/cardindex', CardIndex, null, '/cardindex/search' ],
+    ['/cardindex', CardIndex ],
     ['/cardindex~search', Search ],
     ['/cardindex~card', Card ],
     ['/cardindex~card/:authorId', Card ],