vue路由的钩子函数几种,路由钩子 vue-router

　　本文主要介绍Vue2.x和Vue3.x中路由钩子的区别，分别介绍路由钩子的分类、路由配置守护钩子和组件中的守护钩子，有需要的朋友可以参考。

目录

　　 vue2.x前概念：路由钩子分类路由和组件的概念(便于理解钩子功能)全局路由钩子路由配置守护钩子路由钩子在守护钩子组件中的执行顺序eg:从组件A跳转到组件B，如果有对路由B的更新，每次都会执行以下三个钩子：vue3.x对比变化图差异补充：

vue2.x

前置概念：

路由钩子分类

　　有3类7个挂钩。

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

　　和路由组件是两个概念，大致可以认为是：

　　Route是浏览器URL。

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

全局路由钩子

　　Router.before each (to，from，next) {}前导航护罩

　　在输入路线之前

　　Router.after each (to，from，next) {}后导航护板

　　输入路线后

　　Router.beforeresolve (to，from，next) {}解析保护

　　解析组件时，已经读取了所有的配置，并且已经通过了前面的级别。请在准备好解析组件之前执行。

路由配置守卫钩子

　　在读取路由配置信息之前调用Before()。

　　在beforeCreate()之前执行

　　const router=new VueRouter({

　　路线：[

　　{

　　路径：“/foo”，

　　组件：Foo，

　　beforeEnter:(收件人，发件人，下一个)={ }

　　}

　　]

　　})

组件内的守卫钩子

　　Forerouteenter (to，from，next) {}，然后输入组件

　　默认情况下，无法获取组件实例this。

　　但是可以使用以下方法

　　beforeRouteEnter(收件人，发件人，下一个){

　　next()的回调函数在进入路由后被实例化并执行。

　　接下来(虚拟机={

　　//vm相当于当前组件this

　　})

　　}

　　ForeRouteUpdate (to，from，next) {}在修改组件之前

　　目前，组件仍在使用路由地址更改来满足上述两个条件。

　　forerouteleve(to，from，next) {}在离开组件之前

路由钩子执行顺序

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

　　BeforeRouteLeave()首先离开组件A。

　　BeforeEach()全局前导航保护

　　Before()在读取路由配置信息之前(读取B路由信息)

　　在beforeRouteEnter()进入组件之前

　　BeforeResolve()解析防护

　　AfterEach()全局-后导航护罩

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

　　BeforeEach()全局前导航保护

　　BeforeResolve()全局解析保护

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

vue3.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中路由钩子的区别细节，更多关于Vue2.x和Vue 3.x中路由钩子的区别，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。