脚本宝典收集整理的这篇文章主要介绍了Vue2.x与Vue3.x中路由钩子的区别详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一共分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中路由钩子的区别的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的Vue2.x与Vue3.x中路由钩子的区别详解全部内容,希望文章能够帮你解决Vue2.x与Vue3.x中路由钩子的区别详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。