组件内守卫beforeRouteEnter和beforeRouteLeave

最新推荐文章于 2025-05-16 08:00:00 发布

转载最新推荐文章于 2025-05-16 08:00:00 发布 · 225 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luguankun/p/10727647.html

本文详细介绍了Vue.js中beforeRouteEnter和beforeRouteLeave路由守卫的使用方法。beforeRouteEnter用于在进入路由前进行判断和操作，由于此时组件实例还未创建，无法直接使用this，需通过next(vm=>{}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/luguankun/p/10727647.html