Skip to content

Commit ee471b3

Browse files
committed
feat(projects): 增加路由守卫和系统错误页
1 parent 0836351 commit ee471b3

File tree

7 files changed

+43
-6
lines changed

7 files changed

+43
-6
lines changed

src/router/guard/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { Router } from 'vue-router';
2+
3+
export function setupRouterGuard(router: Router) {
4+
router.beforeEach((to, from, next) => {
5+
console.log('%c [to]-24', 'font-size:13px; background:pink; color:#bf2c9f;', to);
6+
next();
7+
});
8+
}

src/router/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { App } from 'vue';
22
import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
3+
import { setupRouterGuard } from './guard';
34

45
const routes: RouteRecordRaw[] = [
56
{
@@ -10,7 +11,7 @@ const routes: RouteRecordRaw[] = [
1011
{
1112
path: '/test',
1213
name: 'test',
13-
component: () => import('@/views/system/index.vue'), // 注意这里要带上 文件后缀.vue
14+
component: () => import('@/views/test/index.vue'), // 注意这里要带上 文件后缀.vue
1415
},
1516
];
1617

@@ -19,9 +20,10 @@ export const router = createRouter({
1920
history: VITE_HASH_ROUTE === 'Y' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
2021
routes,
2122
});
22-
2323
// 安装vue路由
2424
export async function setupRouter(app: App) {
25+
// 添加路由守卫
26+
setupRouterGuard(router);
2527
app.use(router);
2628
await router.isReady(); //https://router.vuejs.org/zh/api/index.html#isready
2729
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>404</div>
3+
</template>
4+
5+
<script setup lang="ts"></script>
6+
7+
<style lang="scss" scoped></style>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>404</div>
3+
</template>
4+
5+
<script setup lang="ts"></script>
6+
7+
<style lang="scss" scoped></style>
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>500</div>
3+
</template>
4+
5+
<script setup lang="ts"></script>
6+
7+
<style lang="scss" scoped></style>

src/views/login/index.vue

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<template>
2-
<h1>{{ msg }}</h1>
3-
<span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
4-
<a href="" @click="router.push('test')">to test page</a>
2+
<div style="text-align: center">
3+
<h1>{{ msg }}</h1>
4+
<span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
5+
<a href="" @click="switchPage('test')">to test page</a>
6+
</div>
57
</template>
68

79
<script setup lang="ts">
810
import { ref } from 'vue';
911
import { useRouter } from 'vue-router';
1012
const router = useRouter();
1113
const msg = ref('It is just a blank template.');
14+
15+
const switchPage = (path: string) => {
16+
router.push(path);
17+
};
1218
</script>
1319

1420
<style lang="less" scoped></style>

src/views/system/index.vue renamed to src/views/test/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>I prove that you have made the jump.</div>
2+
<div style="text-align: center">I prove that you have made the jump.</div>
33
<a href="" @click="router.back()">to back</a>
44
</template>
55

0 commit comments

Comments
 (0)