feat(projects): 增加错误页和layout布局

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>

src/layouts/index.ts

@@ -0,0 +1,3 @@
+const BasicLayout = () => import('./BasicLayout/index.vue');
+
+export { BasicLayout };

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',
+    path: '/no-permission',
-    name: 'test',
+    name: 'no-permission',
-    component: () => import('@/views/test/index.vue'), // 注意这里要带上 文件后缀.vue
+    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',
+    },
   },
 ];
 

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>

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>

src/views/test/test1.vue

@@ -1,6 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump.</div>
+  <div style="text-align: center">I prove that you have made the jump test1.</div>
-  <a href="" @click="router.back()">to back</a>
 </template>
 
 <script setup lang="ts">

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>

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>