vue离开页面弹窗提示 |
您所在的位置：网站首页 › 如何阻止页面弹窗提示 › vue离开页面弹窗提示 |
|
vue离开提示弹窗分类
一：关闭页签、网页或刷新
mounted() {
window.addEventListener("beforeunload", this.beforeUnloadHandler, false)
},
destroyed() {
window.removeEventListener("beforeunload", this.beforeUnloadHandler, false)
},
methods: {
beforeUnloadHandler(e) {
e.returnValue = "离开此页面？" // 此处返回任意字符串，不返回null即可，不能修改默认提示内容
},
}
二：vue页面返回上一层路由
不断点击浏览器返回键或通过按钮触发this.$router.go(-1)再点击取消按键，beforeRouteLeave不执行next()时，url会变为上一层的url，页面不会切换到上一层，停留在当前页面 不做处理，浏览器地址栏的url会不断返回上一层，此时再点离开按键则返回的可能不是上页的url 所以，需要记录当前页面url并在取消的时候推回路由栈中 data() { return { currentUrl: "" } }, mounted(){ // 记录当前页面url this.currentUrl = window.location.href } beforeRouteLeave(to, from, next) { this.$confirm("系统可能不会保存您所做的更改。", "离开此页面？", { confirmButtonText: "离开", cancelButtonText: "取消", type: "warning" }) .then(() => { // confirmButton回调 next() }) .catch(() => { // cancelButton回调，把当前页路由推回 // 不能使用this.$router进行路由操作，会触发beforeRouteLeave导致死循环 window.history.pushState("", "", this.currentUrl) }) }, back() { // 页面中按键触发 this.$router.go(-1) }什么，你说你狂点浏览器的返回键会粗问题？噢，那太骚了，我顶不住了。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |