From a88079efbb2fc4a676d08b5abba06b16f404cbcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Sat, 6 Aug 2022 13:22:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A2=9E=E5=8A=A0=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E9=A1=B5=E5=92=8Clayout=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout/index.vue             | 19 +++++++
 src/layouts/index.ts                          |  3 ++
 src/router/index.ts                           | 51 +++++++++++++++++--
 .../inherit-page/not-permission/index.vue     |  2 +-
 src/views/login/index.vue                     |  8 +--
 src/views/test/{index.vue => test1.vue}       |  3 +-
 src/views/test/test2.vue                      | 10 ++++
 src/views/test/test3.vue                      | 10 ++++
 8 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 src/layouts/BasicLayout/index.vue
 create mode 100644 src/layouts/index.ts
 rename src/views/test/{index.vue => test1.vue} (77%)
 create mode 100644 src/views/test/test2.vue
 create mode 100644 src/views/test/test3.vue

diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
new file mode 100644
index 0000000..718d7ab
--- /dev/null
+++ b/src/layouts/BasicLayout/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>layout-page</div>
+  route:
+  <br />
+  <router-link to="/test1">Go to test1</router-link>
+  |
+  <router-link to="/test2">Go to test2</router-link>
+  |
+  <router-link to="/test3">Go to test3</router-link>
+  <br />
+  <router-link to="/login">Go to login</router-link>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
new file mode 100644
index 0000000..26d51fc
--- /dev/null
+++ b/src/layouts/index.ts
@@ -0,0 +1,3 @@
+const BasicLayout = () => import('./BasicLayout/index.vue');
+
+export { BasicLayout };
diff --git a/src/router/index.ts b/src/router/index.ts
index 70c8542..33315e9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,17 +1,62 @@
 import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { setupRouterGuard } from './guard';
+import { BasicLayout } from '../layouts/index';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
+    name: 'root',
+    redirect: '/test1',
+    component: BasicLayout,
+    children: [
+      {
+        path: '/test1',
+        name: 'test1',
+        component: () => import('~/src/views/test/test1.vue'),
+      },
+      {
+        path: '/test2',
+        name: 'test2',
+        component: () => import('~/src/views/test/test2.vue'),
+      },
+      {
+        path: '/test3',
+        name: 'test3',
+        component: () => import('~/src/views/test/test3.vue'),
+      },
+    ],
+  },
+  {
+    path: '/login',
     name: 'Login',
     component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue
   },
   {
-    path: '/test',
-    name: 'test',
-    component: () => import('@/views/test/index.vue'), // 注意这里要带上 文件后缀.vue
+    path: '/no-permission',
+    name: 'no-permission',
+    component: () => import('@/views/inherit-page/not-permission/index.vue'),
+    meta: {
+      title: '无权限',
+      singleLayout: 'blank',
+    },
+  },
+  {
+    path: '/service-error',
+    name: 'service-error',
+    component: () => import('@/views/inherit-page/service-error/index.vue'),
+    meta: {
+      title: '服务器错误',
+      singleLayout: 'blank',
+    },
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: '404',
+    component: () => import('@/views/inherit-page/not-found/index.vue'),
+    meta: {
+      title: '错误404',
+    },
   },
 ];
 
diff --git a/src/views/inherit-page/not-permission/index.vue b/src/views/inherit-page/not-permission/index.vue
index 51432cc..5b2efd8 100644
--- a/src/views/inherit-page/not-permission/index.vue
+++ b/src/views/inherit-page/not-permission/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>404</div>
+  <div>403</div>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1ffbe01..1269a6a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,19 +2,13 @@
   <div style="text-align: center">
     <h1>{{ msg }}</h1>
     <span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
-    <a href="" @click="switchPage('test')">to test page</a>
+    <div><router-link to="/">Go to layout</router-link></div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 const msg = ref('It is just a blank template.');
-
-const switchPage = (path: string) => {
-  router.push(path);
-};
 </script>
 
 <style lang="less" scoped></style>
diff --git a/src/views/test/index.vue b/src/views/test/test1.vue
similarity index 77%
rename from src/views/test/index.vue
rename to src/views/test/test1.vue
index ec8461f..6090d46 100644
--- a/src/views/test/index.vue
+++ b/src/views/test/test1.vue
@@ -1,6 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump.</div>
-  <a href="" @click="router.back()">to back</a>
+  <div style="text-align: center">I prove that you have made the jump test1.</div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/test/test2.vue b/src/views/test/test2.vue
new file mode 100644
index 0000000..81b3ccb
--- /dev/null
+++ b/src/views/test/test2.vue
@@ -0,0 +1,10 @@
+<template>
+  <div style="text-align: center">I prove that you have made the jump test2.</div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
+</script>
+
+<style scoped></style>
diff --git a/src/views/test/test3.vue b/src/views/test/test3.vue
new file mode 100644
index 0000000..b7f274d
--- /dev/null
+++ b/src/views/test/test3.vue
@@ -0,0 +1,10 @@
+<template>
+  <div style="text-align: center">I prove that you have made the jump test3.</div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
+</script>
+
+<style scoped></style>