目录Vue2.x前置概念:路由钩子分类路由和组件的概念(方便理解钩子函数)全局路由钩子路由配置守卫钩子组件内的守卫钩子路由钩子执行顺序eg: 从A组件跳转到B组件顺序如果B路有更新,
一共分3类, 7个钩子
路由和组件是2个概念, 可以粗犷的认为:
router.beforeEach(to, from, next){ } 前置导航守卫
路由进入前
router.afterEach(to, from, next){ } 后置导航守卫
路由进入后
router.beforeResolve(to, from, next){ } 解析守卫
解析组件时, 已经读取所有配置, 前面的关卡都通过了, 准备解析组件前执行
beforeEnter() 在读取路由配置信息前调用
在beforeCreate()前执行
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => { }
}
]
})
beforeRouteEnter(to, from, next){ } 进入组件前
默认不能获取组件实例 this
但是以下办法可以访问
beforeRouteEnter(to, from, next){
// next()的回调函数,在进入路由,实例化执行
next(vm => {
// vm等价于当前组件this
})
}
beforeRouteUpdate(to, from, next){ } 修改组件前
当前组件依然在使用路由地址改变满足以上2个条件才会执行
beforeRouteLeave(to, from, next){ } 离开组件前
beforeRouteLeave()
先离开A组件
beforeEach()
全局-前置导航守卫
beforeEnter()
读取路由配置信息前 (读取B路由信息)
beforeRouteEnter()
进入组件前
beforeResolve()
解析守卫
afterEach()
全局-后置导航守卫
beforeEach()
全局 - 前置导航守卫
beforeResolve()
全局 - 解析守卫
beforeRouteUpdate()
组件内 - 修改组件前
vue3.x相对于vue2.x, 只有小部分不同, 此处只针对不同做讲解
B组件中的子组件不会触发路由钩子
B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave
B组件中的子组件不会触发路由钩子
B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave
以上就是Vue2.x与Vue3.x中路由钩子的区别详解的详细内容,更多关于Vue2.x与Vue3.x中路由钩子的区别的资料请关注编程网其它相关文章!
--结束END--
本文标题: Vue2.x与Vue3.x中路由钩子的区别详解
本文链接: https://www.lsjlt.com/news/136549.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0