Vue 组件内路由守卫beforeRouteUpdate调用无效的时候解决方案

组件内路由守卫beforeRouteUpdate调用无效的时候

// 路由更新时触发
beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
},

// 进入守卫：通过路由规则，进入该组件时被调用，进入时触发
beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
},

//离开守卫：通过路由规则，离开该组件时被调用，离开时触发
beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
}   

当beforeRouteUpdate调用无效时

可以采用beforeRouteEnter

beforeRouteEnter(to, from, next) {
  // alert('beforeRouteEnter')
  // 这里无法调到this 如需调用this可以使用以下方式
  next(v => {
    if (to.path == '路径') {
      // console.log(to)
      v.paramsQuery()
      v.loadData()
    }
  })
},

这里无法调到this原因 https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#组件内的守卫

或者可以采用watch监听

watch:{
    $route:{
        immediate: true, // 一旦监听到路由的变化立即执行
            handler(to, from) {
            console.log("监听路由：" + JSON.stringify(to.name));

            if (to.path == '路径'){
                console.log(to)
                this.paramsQuery()
                this.loadData()
            }
        },
    },
},