说明

导航守卫主要用来通过跳转或取消的方式守卫导航, 常用于如登录判断权限验证中是否跳转还是取消

分类

• 全局前置守卫
• 全局解析守卫
• 全局后置钩子
• 路由独享的守卫
• 组件内的守卫

全局前置守卫beforeEach

说明

和vue-routerv3的没有区别，同样是每次导航时触发

语法

router.beforeEach((to,from,next)=>{
  //some code
  next()
})

参数说明

to：即将要进入的目标 路由对象
from：当前导航要离开的路由
next: 创建全局守卫后一定要调用该方法来 resolve这个钩子。执行效果依赖next方法的调用参数

• next()：直接放行，进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
• next(false)：中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址
• next("/")或next({path:"url"})： 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

EG

ts
// 全局前置守卫
router.beforeEach((to, from, next) => {
	console.log('全局前置守卫', to, from);
	next();
});

全局解析守卫beforeResolve

说明

和router.beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

EG

ts
// 全局解析守卫
router.beforeResolve((to, from, next) => {
	console.log('全局解析守卫', to, from);
	next();
});

全局后置钩子

说明

同样具有to、from，但是不会接受next参数, 常用于分析、更改页面标题、声明页面等辅助功能

语法

ts
router.afterEach((to, from) => {
  // ...
})

路由独享守卫

说明

beforeEnter守卫只会在进入路由时触发，当路由的parmas、query、hash发生变化时并不会重复触发

/login/xm/23/%7B"computer":"true","want":["a","b"]%7D  --> /login/xm/24/%7B"computer":"true","want":["a","b"]%7D

// 动态路由变化时并不会再次触发`beforeEnter`函数

EG

ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				alias: '/logins/:name/:age/:hobby',
				component: () => import('@views/Login/LoginView.vue'),
				beforeEnter: (to, from, next) => {
					// ...
					console.log('路由独享守卫beforeEnter触发');
					next();
				},
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
	console.log('全局前置守卫', to, from);
	next();
});

// 全局解析守卫
router.beforeResolve((to, from, next) => {
	console.log('全局解析守卫', to, from);
	next();
});
export default router;

组件内的守卫

vue-routerv3中

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

vue-routerv4中

说明

对于组合式API, beforeRouteUpdate和beforeRouteLeave发生了改变

• onBeforeRouteLeave：在导航离开渲染该组件的对应路由时调用
• onBeforeRouteUpdate：在当前路由改变，但是该组件被复用时调用，EG：动态路由

EG

vue
<template>
	<div>登录界面</div>
</template>

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

const route = useRoute();

// const propsmy = defineProps<{ name: string; age: string; hobby: string }>();
console.log('params登录', route, route.params);
// console.log('propsmy登录', propsmy);

onBeforeRouteLeave((to, from) => {
	console.log('组件内守卫onBeforeRouteLeave', to, from);
});

onBeforeRouteUpdate((to, from) => {
	console.log('组件内守卫onBeforeRouteUpdate', to, from);
});
</script>

<style></style>