Vue路由守卫

最新推荐文章于 2024-08-13 04:17:13 发布

L289121

最新推荐文章于 2024-08-13 04:17:13 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/l289121/article/details/108842198

版权

本文详细介绍了Vue.js路由守卫的使用，包括全局路由守卫的beforeEach、afterEach和beforeResolve，组件路由守卫的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，以及路由独享守卫的beforeEnter。并解析了完整的导航解析流程。

摘要由CSDN通过智能技术生成

一、全局路由守卫

全局路由守卫有三个：
全局前置守卫(router.beforeEach )
全局后置守卫(router.afterEach)
全局解析守卫（router.beforeResolve）

router.beforeEach((to, from, next) => { 
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}

router.afterEach（to，from） = {}

next()：回调函数参数配置
next(false): 中断当前的导航。

二、组件路由守卫

beforeRouteEnter守卫不能访问 this，因为守卫在导航确认前被调用，故新组件还未创建。
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
// 跟 methods: {}等同级别书写，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取 this 实例，只能通过 vm 来访问组件实例
next(vm => {})
}

beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}

beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}

三、路由独享守卫

beforeEnter
路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({ routes: [{
	path: '/',
	name: 'home', component: 'Home',
	beforeEnter: (to, from, next) => {
					// ...
			}
		}
	]	
})

完整的导航解析流程

1、导航被触发。
2、在失活的组件里调用 beforeRouteLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。