路由的钩子函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路由的钩子函数相关的知识,希望对你有一定的参考价值。

参考技术A vue组建级路由钩子函数介绍

路由钩子函数分为三种类型如下:

   第一种:全局钩子函数 。

  router.beforeEach((to, from, next) =>

    console.log('beforeEach')

    //next() //如果要跳转的话,一定要写上next()

    //next(false) //取消了导航

    next() //正常跳转,不写的话,不会跳转

  )

  router.afterEach((to, from) => // 举例: 通过跳转后改变document.title

    if( to.meta.title )

      window.document.title = to.meta.title //每个路由下title

    else

      window.document.title = '默认的title'

    

  )

   第二种:针对单个路由钩子函数

  beforeEnter(to, from, next)

    console.log('beforeEnter')

    next() //正常跳转,不写的话,不会跳转

  

   第三种:组件级钩子函数

  beforeRouteEnter(to, from, next) // 这个路由钩子函数比生命周期beforeCreate函数先执行,所以this实例还没有创建出来

    console.log("beforeRouteEnter")

    console.log(this) //这时this还是undefinde,因为这个时候this实例还没有创建出来

    next((vm) => //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了

      vm.text = '改变了'

    )

  ,

  beforeRouteUpdate(to, from, next)//可以解决二级导航时,页面只渲染一次的问题,也就是导航是否更新了,是否需要更新

    console.log('beforeRouteUpdate')

    next();

  ,

  beforeRouteLeave(to, from, next)// 当离开组件时,是否允许离开

    next()

  

vue之路由钩子函数-路由守卫

参考技术A 1、vue router.beforeEach(全局前置守卫)

beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。

它的三个参数:

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法:next(参数或者空) ***必须调用

next(无参数的时候): 进行管道中的下一个钩子,如果走到最后一个钩子函数,那么 导航的状态就是 confirmed (确认的)

next('/') 或者 next( path: '/' ): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

2、vue router.afterEach(全局后置守卫)

router.beforeEach 是页面加载之前,相反router.afterEach是页面加载之后

你可以在路由配置上直接定义 beforeEnter 守卫:

这些守卫与全局前置守卫的方法参数是一样的。

(一) 清除当前组件中的定时器

当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:

(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转

如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转,结合vuex状态管理(dialogVisibility是否有保存)

(三) 保存相关内容到Vuex中或Session中

当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

以上是关于路由的钩子函数的主要内容,如果未能解决你的问题,请参考以下文章

Vue-Router路由钩子函数(导航守卫)

路由钩子函数

vue-router 钩子函数 (beforeEach、afterEach、beforeEnter)

第10节:路由中的钩子

18、 vue-router导航解析及钩子函数

Vue:router的beforeEach与afterEach钩子函数