一、写在前面
之前对于vue-router的路由导航守卫不是很清楚,今天总结一下,并且总结一下执行的顺序。
二、vue-router2.1、全局守卫——beforeEach
router.beforeEach((to, from, next) => {
console.log(to)
console.log(from)
next()
})
beforeEach
在每一次导航之前都会触发,此时的to
指的是将要跳转到的路由地址,from
指的是从哪一个路由地址跳转的,next
表示跳转方法。2.2、全局导航守卫——beforeResolve
router.beforeResolve((to, from, next) => {
console.log(to)
console.log(from)
next()
})
router.beforeResolve
是全局导航守卫,类似于beforeEach
。2.3、全局导航守卫——afterEach()
router.afterEach((to, from) => {
console.log(to)
console.log(from)
})
afterEach
表示导航之后,此时回调函数中只存在两个参数,一个是to
,另一个是from
。2.4、路由导航守卫
{
path: "/about",
component: About,
beforeEnter: (to, from, next) => {
console.log(to)
console.log(from)
next()
}
该路由守卫放在路由对象上,参数包括,to
,from
,next
2.5、组件导航守卫——beforeRouteEnter
<script>
export default {
name: "About",
beforeRouteEnter(to, from, next) {
console.log(to);
console.log(from);
next();
},
};
</script>
可以在组件的options api
中设置相关的方法,其中存在三个参数,to
, from
,next
,因为在进入组件之前,所以此时的this为undefined2.6、组件导航守卫——beforeRouteUpdate
export default {
name: "About",
beforeRouteUpdate(to, from) {
console.log("🚀🚀~ beforeRouteUpdate");
},
};
当前路由改变,但是该组件仍然被复用是触发,并且此时可以访问其中的this
。2.7、组件导航守卫——beforeRouteLeave
<script>
export default {
name: "About",
beforeRouteLeave (to, from, next) {
console.log(to)
console.log(from)
console.log(this)
next()
}
};
</script>
beforeRouteLeave
可以传入三个参数,一个是to
,另一个是from
,第三个是next
,并且在其中可以访问到this
。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/123758068
内容来源于网络,如有侵权,请联系作者删除!