From de679adadd6760b7873bd51c03944293b3a29c99 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 3 Jan 2019 19:27:49 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BC=D0=B0=D1=80=D1=88=D1=83=D1=80=D1=82=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=82=D0=BE=D1=80=D0=B0=20=D0=B2=20=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B1=D0=B0=D1=85=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/CardIndex/CardIndex.vue | 66 +++++++++++++----------
 client/router.js                          | 21 +++++---
 2 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/client/components/CardIndex/CardIndex.vue b/client/components/CardIndex/CardIndex.vue
index 9abfd5dc..09aa6911 100644
--- a/client/components/CardIndex/CardIndex.vue
+++ b/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="Поиск">
-                <Search></Search>
-            </el-tab-pane>
-            <el-tab-pane label="Автор">
-                <Card></Card>
-            </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-tab-pane label="Поиск"></el-tab-pane>
+            <el-tab-pane label="Автор"></el-tab-pane>
+            <el-tab-pane label="Книга"></el-tab-pane>
+            <el-tab-pane label="История"></el-tab-pane>
+            <router-view></router-view>
         </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 Card from './Card/Card.vue';
-import Book from './Book/Book.vue';
-import History from './History/History.vue';
+import _ from 'lodash';
+
+const tab2Route = [
+    '/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) {
-                case '0': this.$router.push('/cardindex/search'); break;
-                case '1': this.$router.push('/cardindex/card'); break;
-                case '2': this.$router.push('/cardindex/book'); break;
-                case '3': this.$router.push('/cardindex/history'); break;
+            lastActiveTab = newValue;
+            const t = Number(newValue);
+            if (tab2Route[t] !== this.curRoute) {
+                this.$router.replace(tab2Route[t]);
             }
-        },        
+        },
+        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);
     }
 
 }
diff --git a/client/router.js b/client/router.js
index 0f177bb1..58a55482 100644
--- a/client/router.js
+++ b/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/search', CardIndex ],
-    ['/cardindex/card', CardIndex ],
-    ['/cardindex/card/:authorId', CardIndex ],
-    ['/cardindex/book', CardIndex ],
-    ['/cardindex/book/:bookId', CardIndex ],
-    ['/cardindex/history', CardIndex ],
-    
+    ['/cardindex', CardIndex, null, '/cardindex/search' ],
+    ['/cardindex~search', Search ],
+    ['/cardindex~card', Card ],
+    ['/cardindex~card/:authorId', Card ],
+    ['/cardindex~book', Book ],
+    ['/cardindex~book/:bookId', Book ],
+    ['/cardindex~history', History ],
+
     ['/reader', Reader ],
     ['/income', Income ],
     ['/sources', Sources ],