20、vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

beforeRouteEnter(to,from,next)

beforeRouteEnter 函数内部 this 是undefined,这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象,如:next( (vm)=>{} ),参数vm就是组件的实例化对象。




beforeRouteUpdate(to,from,next)

About组件是有二级导航的,在切换二级导航的时候,对应的内容是在变化的;但是about组件是复用的,只会生成一次,切换二级导航的时,如何知道导航在更新呢?
一个组件有二级导航的时候,点击二级导航的时候导航路径更新了,会触发路由钩子函数beforeRouteUpdate。

beforeRouteUpdate(to,from,next){
    console.log('beforeRouteUpdate')
    next()
}

beforeRouteLeave(to,from,next)

当在about切换到user时,about页面有些数据还没有加载完成,这时候我们不让它切换到user。

beforeRouteLeave(to,from,next){//离开组件的时候触发
   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整demo代码




你可能感兴趣的:(20、vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave))