vue离开当前路由销毁当前路由_VUE 离开页面路由拦截

业务场景

在页面内容被编辑后，用户跳转其他路由，需要提示用户：当前页面有改动，确认离开后再进行跳转，以防编辑数据丢失。

代码

beforeRouteLeave (to, from, next) {

this.targetName = to.name // 提示框点击确认后跳转的 路由

if (this.checkEdit()) { // 是否对页面进行了编辑

this.dialogVisible = true // 打开离开页面的提示框

next(false)

} else {

this.dialogVisible = false

next()

}

}

VUE 提供一个钩子函数 beforeRouteLeave, 离开当前路由时会先触发该函数，当然也有beforeRouteEnter,进入路由前先触发该函数。

to: 目标路由的相关信息 对象

from：当前路由的相关信息 对象

next：实行跳转的 函数。传入false，不进行跳转。

检测页面是否编辑

我的思路是在页面初始化时，设置一个对象保存旧有的值。例如在编辑页面初始化编辑数据时：

data () {

return: {

formData: {},

oldData: {}

}

},

mounted () {

init() {