router学习(二): 路由导航守卫

发布于:2022-12-26 ⋅ 阅读:(376) ⋅ 点赞:(0)

路由导航守卫有哪些:

全局守卫
组件内守卫
独享守卫

1.全局守卫

beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置守卫

2.独享守卫

beforeEnter 就是放到routes中定义的:

const routes = [
	{
		name: 'user',
		component: User
		beforeEach: (to, from) => {
			
		}
	}
]
//beforeEnter: [removeQueryParams, removeHash], 可以接受函数数组,removeQueryParams,removeHash为自定义的函数

注意点是独享守卫在路由参数改变但是路由本身地址没有变化的情况下是不会再次触发的。

3.组件内守卫

beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

beforeRouteEnter: 组件对应路由被验证前调用,不能获取组件实例this
beforeRouteUpdate:在当前组件路由改变时,但是组件本身被复用时调用。可以访问this。
beforeRouteLeave:在导航离开当前组件路由时调用,可以访问this

Vue3中setup 中调用可以通过api onBeforeRouteUpdate和onBeforeRouteLeave分别添加update和leave守卫

注意一个事情是beforeRouteEnter中如果想要拿到this实例可以通过next回调函数

beforeRouteEnter: (to, from, next) => {
	next(vm => { //这里vm相当于组件实例this,可以正常访问到组件内数据
			
	})
}

但是next回调被调用时已经时组件路由被读取解析并记录后才调用的,就是如果你要在回调中去重定向路由,那么你当前页面的路由也是在路由记录中的。

完整的导航解析流程:
1.已经失活的组件调用beforeRouteLeave
2.调用全局前置守卫beforeEach
3.调用复用组件的beforeRouteUpdate
4.在路由配置里调用beforeEnter
5.解析异步路由组件
6.调用被激活组件内beforeRouteEnter
7.调用全局解析守卫beforeResolve
8.导航被确认
9.调用全局后置守卫afterEach
10.触发Dom更新
12.调用beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入

router学习系列博文为博主学习router结合日常经验的一个总结记录大部分采用的官方文档内容,如果是学习建议直接转到vue-router官方文档学习。


网站公告

今日签到

点亮在社区的每一天
去签到