首页 >web前端 >前端问答 >vue的导航钩子有哪几个

vue的导航钩子有哪几个

青灯夜游
青灯夜游原创
2022-12-15 10:59:285298浏览

vue的导航钩子有3种:1、全局守卫钩子,是指路由示例上直接操作的钩子函数,特点是所有路由配置的组件都会触发。2、路由独享守卫钩子,是指在单个路由配置的时候也可以设置的钩子函数,且只能在这个路由下起作用。3、局部守卫钩子,是指在组件内执行的钩子函数,类似于数组内的生命周期函数,相当于为配置路由的组件添加的生命周期钩子函数。

vue的导航钩子有哪几个

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

导航钩子的作用

  • vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。

导航钩子的分类

  • 全局守卫
  • 路由独享守卫
  • 局部守卫

1、全局守卫

是指路由示例上直接操作的钩子函数,特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeEach、beforeResolve、afterEach三个。

<code><strong>[beforeEach]</strong>[beforeEach]

:在路由跳转前触发,参数包括to,from,next三个,这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚。
 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  • to:代表要进入的目标,它是一个路由对象
  • from:代表当前正要离开的路由,同样也是一个路由对象
  • next:这是一个必须需要调用的方法,而具体的执行效果则依赖next方法调用的参数

<strong>[beforeResolve]</strong>

[beforeResolve]
:这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个,和beforeEach区别官方解释为:


 区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后,afterEach之后,afterEach之前调用。<strong>[afterEach]</strong>

<pre class="brush:js;toolbar:false;"> const router = new VueRouter({ ... }); router.beforeEach((to, from, next) =&gt; { // do someting }); //全局后置钩子,后置钩子并没有 next 函数,也不会改变导航本身 router.afterEach((to, from) =&gt; { // do someting });</pre>[afterEach]<h3></h3>:和beforeEach相反,它是在路由跳转完成之后触发,参数包括to、from,没有了next,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(足迹按内守卫)之前。

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数,且只能在这个路由下起作用。其位置如下,也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。[beforeEnter]

  cont router = new VueRouter({
        routes: [
            {
                path: &#39;/file&#39;,
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

:和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行,参数有to、from、next。

3、局部守卫

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变,但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

是指在组件内执行的钩子函数,类似于数组内的生命周期函数,相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个,执行位置如下:

路由跳转导航解析流程,当由A路由–>B路由的时候

1、在A组件里调用离开守卫。 A组件中的beforeRouterLeave

2、调用全局的beforeEach守卫。 router.beforeEach
routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

3、再执行B路由配置里调用beforeEnter。

4、再执行B组件的进入守卫。 B组件中beforeRouterEnter

5、调用全局的beforeResolve守卫(2.5 )。 router.beforeResolve

6、导航被确认。

7、调用全局的afterEach钩子。 router.afterEach

8、触发DOM更新。【相关推荐:vuejs视频教程

、web前端开发】

以上是vue的导航钩子有哪几个的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn