vue离开当前页面触发的函数代码

当用户离开Vue页面时，我们可以使用beforeRouteLeave路由导航守卫去触发相应的函数代码。下面，我将详细讲解该攻略的应用步骤和示例说明。

步骤一：添加路由导航守卫

在Vue的路由配置中添加beforeRouteLeave守卫，并指定它所要触发的函数代码。以下是守卫函数的结构：

beforeRouteLeave(to, from, next) {
  // 触发的函数代码
  next();
}

在该守卫中，我们可以使用to和from参数来访问当前和目标路由对象，并使用next参数来控制路由跳转。

步骤二：编写函数代码

在beforeRouteLeave守卫中，我们所编写的函数代码将会在用户导航离开当前页面前被触发。以下是一些常见的应用场景和函数代码实现示例：

1. 表单提交前确认对话框

在用户离开包含表单的页面前，可以弹出确认对话框提示用户是否需要保存修改。以下是示例代码：

beforeRouteLeave(to, from, next) {
  if (this.formModified) {
    if (confirm("是否保存对表单的更改？")) {
      // 用户点击了“确定”按钮，保存表单
      this.saveForm();
      next();
    } else {
      // 用户点击了“取消”按钮，不保存表单
      next();
    }
  } else {
    // 表单没有被修改过
    next();
  }
}

2. 页面关闭防止误退

在用户误退页面时，可以弹出确认对话框提示用户是否需要关闭当前页面。以下是示例代码：

beforeRouteLeave(to, from, next) {
  if (this.formModified) {
    if (confirm("是否确定离开页面？")) {
      next();
    } else {
      next(false);
    }
  } else {
    next();
  }
}

示例说明

假设我们有一个包含表单的Vue页面，当用户离开该页面时，我们需要弹出确认对话框提示用户是否需要保存修改。以下是完整的代码示例：

<template>
  <div>
    <h1>表单页面</h1>
    <form>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="form.name">
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="text" id="age" v-model="form.age">
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      formModified: false
    };
  },
  methods: {
    saveForm() {
      // 保存表单
      console.log('表单已保存');
      // 重置表单修改状态
      this.formModified = false;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.formModified) {
      if (confirm("是否保存对表单的更改？")) {
        // 用户点击了“确定”按钮，保存表单
        this.saveForm();
        next();
      } else {
        // 用户点击了“取消”按钮，不保存表单
        next();
      }
    } else {
      // 表单没有被修改过
      next();
    }
  }
};
</script>

在上面的示例代码中，我们监测了表单是否被修改过，如果修改过，就弹出一个确认对话框，提示用户是否需要保存修改。如果用户点击了“确定”按钮，就执行saveForm方法保存表单后跳转页面；如果用户点击了“取消”按钮，就直接跳转页面而不保存表单。如果表单没有被修改过，则直接跳转页面而不弹出确认对话框。

除了以上示例，还有很多其他的应用场景可以使用beforeRouteLeave守卫去触发相应的函数代码，只需要根据具体的需求进行函数代码的编写即可。