vue-router中的路由钩子函数基本用法汇总

Posted web-develper

tags:

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

最近学习一下,vue-router的路由钩子函数,相信只要学前端的小伙伴都接触的不少,在这里简单汇总一下,希望对小伙伴們有所帮助。
路由钩子函数分为三种类型如下:
  第一种:全局钩子函数
  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-router中的路由钩子函数基本用法汇总的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

vue-router的钩子函数

vue-router导航守卫

vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)