在移动端开发中,经常有一些编辑页面要防止用户手势后退,这边用到vue和vant
mounted() {
// 添加返回监听
window.addEventListener("popstate", this.onBack)
},
data () {
return {
mixinPath: "",
mixinRemove: false // 如果路由跳转用replace代替,那么需要移除一下
}
},
methods: {
onBack () {
Dialog.confirm({
title: "退出",
message: "退出将不保存此步骤数据"
}).then(() => {
this.$router.go(-1);
sessionStorage.removeItem(this.mixinPath);
}).catch(() => {
history.pushState(null, null, document.URL);
})
},
// 防止刷新或者后退多次记录history
haveHistory (path) {
this.mixinPath = path
if (!sessionStorage.getItem(path)) {
history.pushState(null, null, document.URL);
sessionStorage.setItem(path, 1)
}
}
},
beforeRouteEnter (to, from, next) {
next((vm) => {
console.log(to)
// 防止刷新时多push
vm.haveHistory(to.path);
})
},
// 退出组件后取消监听
beforeDestroy () {
if (this.mixinRemove) {
sessionStorage.removeItem(this.mixinPath)
}
window.removeEventListener("popstate", this.onBack, false)
},
2022-08-09 修改
有更简单的方式,记得稍微延迟一下
beforeRouteLeave(to, form, next) {
setTimeout(() => {
this.$dialog
.confirm({
title: "是否确认退出",
message: "是否确认退出?",
})
.then(() => {
next();
})
.catch(() => {
next(false); // false这个参数记得填写,拦截后退作用
});
}, 200);
},