Доработки маршуртизатора в табах картотеки

client/components/CardIndex/CardIndex.vue

@@ -1,20 +1,13 @@
 <template>
     <el-container direction="vertical">
         <el-tabs type="border-card" style="height: 100%;" v-model="selectedTab">
-            <el-tab-pane label="Поиск">
+            <el-tab-pane label="Поиск"></el-tab-pane>
-                <Search></Search>
+            <el-tab-pane label="Автор"></el-tab-pane>
-            </el-tab-pane>
+            <el-tab-pane label="Книга"></el-tab-pane>
-            <el-tab-pane label="Автор">
+            <el-tab-pane label="История"></el-tab-pane>
-                <Card></Card>
+            <router-view></router-view>
-            </el-tab-pane>
-            <el-tab-pane label="Книга">
-                <Book></Book>
-            </el-tab-pane>
-            <el-tab-pane label="История">
-                <History></History>
-            </el-tab-pane>
-            {{ this.$route.path }}
         </el-tabs>
+        {{ curRoute }}
     </el-container>
 </template>
 
@@ -22,30 +15,49 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import Search from './Search/Search.vue';
+import _ from 'lodash';
-import Card from './Card/Card.vue';
+
-import Book from './Book/Book.vue';
+const tab2Route = [
-import History from './History/History.vue';
+    '/cardindex/search',
+    '/cardindex/card',
+    '/cardindex/book',
+    '/cardindex/history',
+];
+let lastActiveTab = null;
 
 export default @Component({
-    components: {
-        Search, Card, Book, History
-    },
     watch: {
         selectedTab: function(newValue, oldValue) {
-            switch (newValue) {
+            lastActiveTab = newValue;
-                case '0': this.$router.push('/cardindex/search'); break;
+            const t = Number(newValue);
-                case '1': this.$router.push('/cardindex/card'); break;
+            if (tab2Route[t] !== this.curRoute) {
-                case '2': this.$router.push('/cardindex/book'); break;
+                this.$router.replace(tab2Route[t]);
-                case '3': this.$router.push('/cardindex/history'); break;
             }
-        },        
+        },
+        curRoute: function(newValue, oldValue) {
+            this.setTabByRoute(newValue);
+        },
     },
 })
 class CardIndex extends Vue {
     selectedTab = null;
 
-    created() {
+    mounted() {
+        this.setTabByRoute(this.curRoute);
+        if (lastActiveTab !== null)
+            this.selectedTab = lastActiveTab;
+    }
+
+    setTabByRoute(route) {
+        const t = _.indexOf(tab2Route, route);
+        if (t >= 0 && t !== this.selectedTab) {
+            this.selectedTab = t.toString();
+        }
+    }
+
+    get curRoute() {
+        const m = this.$route.path.match(/^(\/[^\/]*\/[^\/]*).*$/i);
+        return (m ? m[1] : this.$route.path);
     }
 
 }

client/router.js

@@ -3,8 +3,13 @@ import VueRouter from 'vue-router';
 import _ from 'lodash';
 
 import App from './components/App.vue';
+
 import CardIndex from './components/CardIndex/CardIndex.vue';
 import Search from  './components/CardIndex/Search/Search.vue';
+import Card from  './components/CardIndex/Card/Card.vue';
+import Book from  './components/CardIndex/Book/Book.vue';
+import History from  './components/CardIndex/History/History.vue';
+
 import Reader from './components/Reader/Reader.vue';
 //import Forum from './components/Forum/Forum.vue';
 import Income from './components/Income/Income.vue';
@@ -15,14 +20,14 @@ import NotFound404 from './components/NotFound404/NotFound404.vue';
 
 const myRoutes = [
     ['/', null, null, '/cardindex'],
-    ['/cardindex', CardIndex ],
+    ['/cardindex', CardIndex, null, '/cardindex/search' ],
-    ['/cardindex/search', CardIndex ],
+    ['/cardindex~search', Search ],
-    ['/cardindex/card', CardIndex ],
+    ['/cardindex~card', Card ],
-    ['/cardindex/card/:authorId', CardIndex ],
+    ['/cardindex~card/:authorId', Card ],
-    ['/cardindex/book', CardIndex ],
+    ['/cardindex~book', Book ],
-    ['/cardindex/book/:bookId', CardIndex ],
+    ['/cardindex~book/:bookId', Book ],
-    ['/cardindex/history', CardIndex ],
+    ['/cardindex~history', History ],
-    
+
     ['/reader', Reader ],
     ['/income', Income ],
     ['/sources', Sources ],