vue离开页面时调用的方法

// 在 Vue 组件中，可以使用 beforeRouteLeave 导航守卫来在离开页面时调用方法。
// 该方法会在路由离开前被调用，允许你执行一些清理操作或确认用户是否真的要离开。

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 其他选项...

  // 使用 beforeRouteLeave 导航守卫
  beforeRouteLeave(to, from, next) {
    // 执行离开页面时需要的操作
    this.saveData(); // 假设这是一个保存数据的方法

    // 确认用户是否真的要离开页面
    const answer = window.confirm('你确定要离开吗？未保存的数据将会丢失。');
    if (answer) {
      next(); // 用户点击了“确定”，继续导航
    } else {
      next(false); // 用户点击了“取消”，阻止导航
    }
  },

  methods: {
    saveData() {
      // 保存数据的逻辑
      console.log('数据已保存');
    }
  }
}
</script>

解释说明：

• beforeRouteLeave 是 Vue Router 提供的一个导航守卫，用于在离开当前路由之前执行某些操作。
• 它接收三个参数：to（即将进入的目标路由）、from（当前路由）和 next（必须调用以确认导航是否继续）。
• 在这个例子中，当用户尝试离开页面时，会弹出一个确认框询问用户是否真的要离开。如果用户确认离开，则调用 next() 继续导航；否则调用 next(false) 阻止导航。
• 同时，在离开页面之前还可以调用 saveData 方法来执行一些清理或保存操作。