增加子页面，404 状态处理

static/app.js

@@ -2,13 +2,14 @@
     const options = {
         moduleCache: {
             vue: Vue,
-            less: less,
+            less: less
-            storage: {}
         },
         getFile(url) {
             return fetch(url).then(res => {
                 if (res.ok) {
                     return {getContentData: binary => binary ? res.arrayBuffer() : res.text()};
+                } else if (res.status === 404) {
+                    return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`;
                 } else {
                     throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                 }
@@ -33,9 +34,13 @@
     router.beforeEach(function (to, fr, next) {
 
         let page = to.fullPath;
+
         if (to.fullPath === '/') {
-            page = './static/template/index.vue';
+            page = './static/template/pages/one.vue';
         }
+        page = page.replace(/-/g, '/');
+
+        console.log('before', page)
 
         const name = page.replace(/[.\/]+/g, '_');
         if (router.hasRoute(name)) {

static/template/layout.vue

@@ -42,8 +42,8 @@
                 <div v-text="menu.name"></div>
               </el-tooltip>
             </template>
-            <h5 v-text="menu.title">Default colors</h5>
+            <h5 v-text="menu.title"></h5>
-            <el-menu default-active="2">
+            <el-menu :default-active="1" :open="1" :router="true">
               <el-sub-menu index="1">
                 <template #title>
                   <!--<el-icon>-->
@@ -52,9 +52,9 @@
                   <span>Navigator One</span>
                 </template>
 
-                <el-menu-item index="1-1">item one</el-menu-item>
+                <el-menu-item index="1-1" route="static-template-pages-one.vue">item one route</el-menu-item>
-                <el-menu-item index="1-2">item one</el-menu-item>
+                <el-menu-item index="1-2" route="static-template-pages-two.vue">item two route</el-menu-item>
-                <el-menu-item index="1-3">item three</el-menu-item>
+                <el-menu-item index="1-3" route="static-template-pages-thr.vue">item thr route</el-menu-item>
 
               </el-sub-menu>
               <el-menu-item index="2">

static/template/pages/one.vue

@@ -2,7 +2,7 @@
   <el-container>
     <el-header>
       <el-row justify="space-between">
-        <el-col :span="12">页面标题 - 导航条</el-col>
+        <el-col :span="12">页面标题 - 导航条 - ONE-PAGE</el-col>
         <el-col :span="12" style="text-align:right">
           <el-button>功能按钮1</el-button>
           <el-button>功能按钮2</el-button>

static/template/pages/thr.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-row justify="space-between">
+        <el-col :span="12">页面标题 - 导航条 - Three-PAGE</el-col>
+        <el-col :span="12" style="text-align:right">
+          <el-button>功能按钮1</el-button>
+          <el-button>功能按钮2</el-button>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-scrollbar>
+        <div style="padding:20px;border-radius:10px;background:white">
+
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="Approved by">
+              <el-input placeholder="Approved by"></el-input>
+            </el-form-item>
+            <el-form-item label="Activity zone">
+              <el-select placeholder="Activity zone">
+                <el-option label="Zone one" value="shanghai"></el-option>
+                <el-option label="Zone two" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary">Query</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-table :data="tableData" border style="width:100%">
+            <el-table-column prop="date" label="Date" width="180"/>
+            <el-table-column prop="name" label="Name" width="180"/>
+            <el-table-column prop="address" label="Address"/>
+          </el-table>
+
+        </div>
+      </el-scrollbar>
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts">
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+      ],
+    }
+  },
+}
+</script>

static/template/pages/two.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-row justify="space-between">
+        <el-col :span="12">页面标题 - 导航条 - TWO-PAGE</el-col>
+        <el-col :span="12" style="text-align:right">
+          <el-button>功能按钮1</el-button>
+          <el-button>功能按钮2</el-button>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      <el-scrollbar>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+      </el-scrollbar>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userName: "ThinkAdmin"
+    }
+  }
+}
+</script>