VUE阻止浏览器返回或移动端物理返回按钮返回页面
些项目的时候经常会碰到需要阻止用户返回页面的需求,例如:长表单录入,为了更好的用户体验,通常会在用户返回页面是提示用户是否确定需要返回,防止用户误操作导致数据丢失的问题!实现方法:这里可以使用 vue-router 的路由守卫beforeRouteLeave (官方文档:导航守卫 | Vue Router)来监听页面的返回操作,通过 next (false)回调函数来阻止页面的返回这里用setTi
·
些项目的时候经常会碰到需要阻止用户返回页面的需求,例如:长表单录入,为了更好的用户体验,通常会在用户返回页面是提示用户是否确定需要返回,防止用户误操作导致数据丢失的问题!
实现方法:
这里可以使用 vue-router 的路由守卫 beforeRouteLeave (官方文档:导航守卫 | Vue Router) 来监听页面的返回操作,通过 next (false)回调函数来阻止页面的返回
这里用setTimeout 的原因是我用了elementUI的弹窗提示,解决浏览器前后退MessageBox闪烁的问题!
beforeRouteLeave(to, form, next) {
setTimeout(() => {
this.$confirm('当前添加或修改的数据未提交,返回将会丢失,是否确定返回?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose: false,
closeOnClickModal: false,
type: 'warning'
}).then(() => {
next()
}).catch(() => {
next(false)
})
}, 200)
},
更多推荐
已为社区贡献1条内容
所有评论(0)