From ee471b30d3b8fe13e68bf8ab19122575ab7152ea 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 12:34:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A2=9E=E5=8A=A0=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=AE=88=E5=8D=AB=E5=92=8C=E7=B3=BB=E7=BB=9F=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/guard/index.ts                       |  8 ++++++++
 src/router/index.ts                             |  6 ++++--
 src/views/inherit-page/not-found/index.vue      |  7 +++++++
 src/views/inherit-page/not-permission/index.vue |  7 +++++++
 src/views/inherit-page/service-error/index.vue  |  7 +++++++
 src/views/login/index.vue                       | 12 +++++++++---
 src/views/{system => test}/index.vue            |  2 +-
 7 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 src/router/guard/index.ts
 create mode 100644 src/views/inherit-page/not-found/index.vue
 create mode 100644 src/views/inherit-page/not-permission/index.vue
 create mode 100644 src/views/inherit-page/service-error/index.vue
 rename src/views/{system => test}/index.vue (72%)

diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
new file mode 100644
index 0000000..ebd7355
--- /dev/null
+++ b/src/router/guard/index.ts
@@ -0,0 +1,8 @@
+import type { Router } from 'vue-router';
+
+export function setupRouterGuard(router: Router) {
+  router.beforeEach((to, from, next) => {
+    console.log('%c [to]-24', 'font-size:13px; background:pink; color:#bf2c9f;', to);
+    next();
+  });
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index dbd4460..70c8542 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { setupRouterGuard } from './guard';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -10,7 +11,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/test',
     name: 'test',
-    component: () => import('@/views/system/index.vue'), // 注意这里要带上 文件后缀.vue
+    component: () => import('@/views/test/index.vue'), // 注意这里要带上 文件后缀.vue
   },
 ];
 
@@ -19,9 +20,10 @@ export const router = createRouter({
   history: VITE_HASH_ROUTE === 'Y' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
   routes,
 });
-
 // 安装vue路由
 export async function setupRouter(app: App) {
+  // 添加路由守卫
+  setupRouterGuard(router);
   app.use(router);
   await router.isReady(); //https://router.vuejs.org/zh/api/index.html#isready
 }
diff --git a/src/views/inherit-page/not-found/index.vue b/src/views/inherit-page/not-found/index.vue
new file mode 100644
index 0000000..51432cc
--- /dev/null
+++ b/src/views/inherit-page/not-found/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>404</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/inherit-page/not-permission/index.vue b/src/views/inherit-page/not-permission/index.vue
new file mode 100644
index 0000000..51432cc
--- /dev/null
+++ b/src/views/inherit-page/not-permission/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>404</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/inherit-page/service-error/index.vue b/src/views/inherit-page/service-error/index.vue
new file mode 100644
index 0000000..3a91663
--- /dev/null
+++ b/src/views/inherit-page/service-error/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>500</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e5127e0..1ffbe01 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <h1>{{ msg }}</h1>
-  <span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
-  <a href="" @click="router.push('test')">to test page</a>
+  <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>
 </template>
 
 <script setup lang="ts">
@@ -9,6 +11,10 @@ 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/system/index.vue b/src/views/test/index.vue
similarity index 72%
rename from src/views/system/index.vue
rename to src/views/test/index.vue
index 6e28a43..ec8461f 100644
--- a/src/views/system/index.vue
+++ b/src/views/test/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>I prove that you have made the jump.</div>
+  <div style="text-align: center">I prove that you have made the jump.</div>
   <a href="" @click="router.back()">to back</a>
 </template>