Добавлены заготовки компонентов для табов картотеки

client/components/CardIndex/Book/Book.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-container>
+        Раздел Book в разработке
+    </el-container>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+})
+class Book extends Vue {
+    created() {
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>

client/components/CardIndex/Card/Card.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-container>
+        Раздел Card в разработке
+    </el-container>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+})
+class Card extends Vue {
+    created() {
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>

client/components/CardIndex/CardIndex.vue

@@ -1,7 +1,20 @@
 <template>
     <el-container direction="vertical">
-        <el-header height="50px">Header</el-header>
-        <router-view></router-view>
+        <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-tabs>
     </el-container>
 </template>
 
@@ -9,10 +22,29 @@
 //-----------------------------------------------------------------------------
 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';
 
 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;
+            }
+        },        
+    },
 })
 class CardIndex extends Vue {
+    selectedTab = null;
+
     created() {
     }
 
@@ -21,7 +53,4 @@ class CardIndex extends Vue {
 </script>
 
 <style scoped>
-.el-header {
-    border: 1px solid black;
-}
 </style>

client/components/CardIndex/History/History.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-container>
+        Раздел History в разработке
+    </el-container>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+})
+class History extends Vue {
+    created() {
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>

client/router.js

@@ -15,9 +15,14 @@ import NotFound404 from './components/NotFound404/NotFound404.vue';
 
 const myRoutes = [
     ['/', null, null, '/cardindex'],
-    ['/cardindex', CardIndex, null, '/cardindex/search' ],
-    ['/cardindex~search', Search ],
-    //['/cardindex~card/:authorId', CardIndex ],
+    ['/cardindex', CardIndex ],
+    ['/cardindex/search', CardIndex ],
+    ['/cardindex/card', CardIndex ],
+    ['/cardindex/card/:authorId', CardIndex ],
+    ['/cardindex/book', CardIndex ],
+    ['/cardindex/book/:bookId', CardIndex ],
+    ['/cardindex/history', CardIndex ],
+    
     ['/reader', Reader ],
     ['/income', Income ],
     ['/sources', Sources ],