vue页面离开后执行函数的实例

当我们使用Vue.js来构建前端项目时，有时候需要在页面离开后执行某些操作。这时候我们可以利用Vue的生命周期钩子来实现，在页面离开时执行我们需要的函数。

具体来说，我们可以利用 beforeRouteLeave 钩子在用户离开当前页面前执行某些逻辑。这个钩子会在导航离开当前路由的对应组件时被调用，你可以在该钩子内部访问组件实例 this。

下面是示例代码：

export default {
  data() {
    return {
      isEditing: false
    }
  },
  methods: {
    leavePage() {
      if (this.isEditing) {
        return confirm('确定要放弃编辑吗？')
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.leavePage()) {
      next();
    } else {
      next(false);
    }
  }
}

以上代码中，我们在组件实例中定义了 isEditing 和 leavePage 两个属性和方法。isEditing 用来判断用户是否有未保存的修改，leavePage 方法用来提示用户是否确认离开当前页面。在 beforeRouteLeave 钩子中，我们调用了 leavePage 方法并根据方法的返回值确定是否继续页面导航。

接下来我们再看一个更加实用的例子。假设我们的页面中有一些表单，表单中的数据需要保存到后端服务器。在用户离开页面时，我们需要确保所有修改的数据都已经保存到服务器。我们可以结合 axios 库和 Promise 对象来实现这个功能。

import axios from 'axios'

export default {
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    saveData() {
      // 将 `formData` 保存到服务器
      return axios.post('/api/save', this.formData)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.saveData().then(() => {
      next();
    }).catch(() => {
      next(false);
    })
  }
}

以上代码中，我们在组件实例中定义了 formData 和 saveData 两个属性和方法。saveData 方法用来将表单数据保存到服务器，当数据保存成功时，beforeRouteLeave 钩子会继续执行页面导航，否则会阻止导航。通过这种方式，我们可以确保表单数据在用户离开页面时成功保存到服务器。

这就是利用 beforeRouteLeave 钩子实现页面离开后执行函数的实例，希望对你有所帮助。