组件内守卫beforeRouteEnter和beforeRouteLeave

一个坑：beforeRouteEnter 和 afterRouteLeave 是没有【r】的！！！

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

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

在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);
              
          })

       next('/login')
      }
  }
 
}
</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>