VueRouter beforeRouterEnter(组件内守卫:到达)

需求 当一个应用模块过期/停用, 这个模块的路由就会重定向到error模块,并且提示该模块是停用还是到期

存入

//判断
//如果模块过期就会添加error路由,并切其他路由重定向到error路由
//这里已经过了,如果过期酒
item.children.forEach(route => {
        route.redirect = { name: `${item.name}Error` }
      })
      errRoute.name = `${item.name}Error`
      errRoute.path = item.path
      errRoute.alias = item.path
      if (authArr[index].status === 'STOP') {//从权限树中获取,停用isStop就设置为true
        errRoute.meta.isStop = true
      }else{
        errRoute.meta.isStop = false
      }
      item.children.push(errRoute)
}
errRoute.meta.isStop = true//如果停用 路由的meta自定义字段isStop就为true
errRoute.meta.isStop = false//如果停用 路由的meta自定义字段isStop就为false

这时 只需要在error.vue页面的created生命周期用this.$route.meta.isStop来判断它是否是停用或过期

error.vue

<script>
export default {
  data() {
    return {
      isStop: false,
    }
  },
  created(){
    this.isStop = this.$route.meta.isStop
  },
}
</script>

本来以为这样就万事大吉了 结果....

当不同的各个模块都过期或停用时,他们重定向的是同一个error组件,所以 created只会触发一次.....

结果就是要不都是过期,要不就都是停用.

解决方案

这时就用到组件路由守卫:到达

beforeRouteEnter(to, from, next) {
//每次切换都会执行守卫函数
//不可以直接在这里赋值,此时this获取不到vue实列
    next(vm => {
	  //vm为vue实列,在这里赋值即可
      vm.isStop = to.meta.isStop
    })
  },

完毕~