瀏覽代碼

Доработки маршрутизации

Book Pauk 6 年之前
父節點
當前提交
589e3480dd
共有 3 個文件被更改,包括 39 次插入13 次删除
  1. 17 13
      client/components/App.vue
  2. 20 0
      client/components/NotFound404/NotFound404.vue
  3. 2 0
      client/router.js

+ 17 - 13
client/components/App.vue

@@ -3,32 +3,32 @@
         <el-aside :width="asideWidth">
             <div class="app-name"><span v-html="appName"></span></div>
             <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
-            <el-menu class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse" router>
-              <el-menu-item index="cardindex">
+            <el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router>
+              <el-menu-item index="/cardindex">
                 <i class="el-icon-search"></i>
-                <span slot="title">Картотека</span>
+                <span style="font-weight: bold" slot="title">Картотека</span>
               </el-menu-item>
-              <el-menu-item index="reader">
+              <el-menu-item index="/reader">
                 <i class="el-icon-tickets"></i>
                 <span slot="title">Читалка</span>
               </el-menu-item>
-              <el-menu-item index="forum" disabled>
+              <el-menu-item index="/forum" disabled>
                 <i class="el-icon-message"></i>
                 <span slot="title">Форум-чат</span>
               </el-menu-item>
-              <el-menu-item index="income">
+              <el-menu-item index="/income">
                 <i class="el-icon-upload"></i>
                 <span slot="title">Поступления</span>
               </el-menu-item>
-              <el-menu-item index="sources">
+              <el-menu-item index="/sources">
                 <i class="el-icon-menu"></i>
                 <span slot="title">Источники</span>
               </el-menu-item>
-              <el-menu-item index="settings">
+              <el-menu-item index="/settings">
                 <i class="el-icon-setting"></i>
                 <span slot="title">Параметры</span>
               </el-menu-item>
-              <el-menu-item index="help">
+              <el-menu-item index="/help">
                 <i class="el-icon-question"></i>
                 <span slot="title">Справка</span>
               </el-menu-item>
@@ -70,10 +70,6 @@ class App extends Vue {
         });
     }
 
-    handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-    }
-
     toggleCollapse() {
         this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
     }
@@ -108,6 +104,14 @@ class App extends Vue {
     get apiError() {
         return this.state.apiError;
     }
+
+    get rootRoute() {
+        const m = this.$route.path.match(/^(\/[^\/]*).*$/i);
+        if (m) 
+            return m[1];
+        else
+            return this.$route.path;
+    }
 }
 //-----------------------------------------------------------------------------
 </script>

+ 20 - 0
client/components/NotFound404/NotFound404.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-container>
+        Страница не найдена
+    </el-container>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+})
+class NotFound404 extends Vue {
+    created() {
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>

+ 2 - 0
client/router.js

@@ -8,6 +8,7 @@ import Income from './components/Income/Income.vue';
 import Sources from './components/Sources/Sources.vue';
 import Settings from './components/Settings/Settings.vue';
 import Help from './components/Help/Help.vue';
+import NotFound404 from './components/NotFound404/NotFound404.vue';
 
 Vue.use(VueRouter);
 
@@ -19,6 +20,7 @@ let routes = [
     { path: '/sources', component: Sources },
     { path: '/settings', component: Settings },
     { path: '/help', component: Help },
+    { path: '*', component: NotFound404 },
 ];
 
 export default new VueRouter({