feat(projects): 增加路由守卫和系统错误页

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();
+  });
+}

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
 }

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>

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>

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>

src/views/login/index.vue

@@ -1,14 +1,20 @@
 <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">
 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>

src/views/system/index.vue → 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>