温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue2.x与Vue3.x中路由钩子的区别是怎样的

发布时间:2021-09-24 14:31:35 来源:亿速云 阅读:194 作者:柒染 栏目:开发技术

本篇文章给大家分享的是有关Vue2.x与Vue3.x中路由钩子的区别是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

    vue2.x

    前置概念:

    路由钩子分类

    一共分3类, 7个钩子

    Vue2.x与Vue3.x中路由钩子的区别是怎样的

    路由和组件的概念(方便理解钩子函数)

    路由和组件是2个概念, 可以粗犷的认为:

    • 路由是浏览器网址

    • 组件是显示在网页上的不同内容

    全局路由钩子

    router.beforeEach(to, from, next){ } 前置导航守卫

    路由进入前

    router.afterEach(to, from, next){ } 后置导航守卫

    路由进入后

    router.beforeResolve(to, from, next){ } 解析守卫

    Vue2.x与Vue3.x中路由钩子的区别是怎样的 

    解析组件时, 已经读取所有配置, 前面的关卡都通过了, 准备解析组件前执行

    路由配置守卫钩子

    Vue2.x与Vue3.x中路由钩子的区别是怎样的

    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){ } 离开组件前

    路由钩子执行顺序

    eg: 从A组件跳转到B组件顺序

    beforeRouteLeave() 先离开A组件

    beforeEach() 全局-前置导航守卫

    beforeEnter() 读取路由配置信息前 (读取B路由信息)

    beforeRouteEnter() 进入组件前

    beforeResolve() 解析守卫

    afterEach() 全局-后置导航守卫

    如果B路有更新, 每次都会执行以下三个钩子:

    beforeEach() 全局 - 前置导航守卫

    beforeResolve() 全局 - 解析守卫

    beforeRouteUpdate() 组件内 - 修改组件前

    vue3.x

    vue3.x相对于vue2.x, 只有小部分不同, 此处只针对不同做讲解

    对比变化图

    Vue2.x与Vue3.x中路由钩子的区别是怎样的

    区别补充:

    • 在Vue2.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

    B组件中的子组件不会触发路由钩子

    • 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

    B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave
    B组件中的子组件不会触发路由钩子

    • 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

    B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave

    以上就是Vue2.x与Vue3.x中路由钩子的区别是怎样的,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI