组件内守卫beforeRouteEnter和beforeRouteLeave

佚名 6年前 (2019-04-18) 随笔 2290人围观抢沙发百度已收录

beforeRouteEnter用法和其他守卫差不多。

有个注意的地方就是beforeRouteEnter不能用this获取组件内收据。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

在next()方法内存入vm这个参数，获取组件内数据。

beforeRouteEnter(to,from,next){ next(vm=>{vm.data}) }

例子：

<template>
<div>
    test
</div>
</template>
<script>
export default {
  name: "Test",
  data () {
    return {
        data:"数据"
    };
  },
  beforeRouteEnter(to,from,next){
      if(to.path==="/test"){
          alert("请登录");
          next(vm=>{
              console.log(vm.data);
              
          })
      }
  }
 
}
</script>
<style lang="css" scoped>
</style>

beforeRouteLeave用来判断页面是否离开

例子：

<template>
<div>
    test
</div>
</template>
<script>
export default {
  name: "Test",
  data () {
    return {
      
    };
  },
 

beforeRouteLeave(to,from,next){
    if(confirm("离开么？")){
        next();
    }else{
        next(false)
    }
}
}
</script>
<style lang="css" scoped>
</style>