vue实现页面数据未保存时离开页面做弹窗提示
需求分析:页面存在编辑框,当用户进入编辑状态时,如果没有点击保存就离开页面,需弹窗提示。如:实现原理:使用路由守卫beforeRouteLeave进行控制,当路由守卫监听到页面路由发生改变时触发弹窗。实现代码:mounted() {......}// 使用路由守卫判断是否离开当前页面beforeRouteLeave(to, form, next) {if (this.editingRowId !=
·
需求分析:
页面存在编辑框,当用户进入编辑状态时,如果没有点击保存就离开页面,需弹窗提示。如:
实现原理:
使用路由守卫beforeRouteLeave进行控制,当路由守卫监听到页面路由发生改变时触发弹窗。
实现代码:
mounted() {
......
}
// 使用路由守卫判断是否离开当前页面
beforeRouteLeave(to, form, next) {
if (this.editingRowId !== '') { // 此处为个人项目条件判断,当条件成立时才执行路由守卫
this.$confirm('当前信息未保存,离开页面将会放弃所有修改数据,', '提示', {
closeOnClickModal: false,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确定则往下执行
next()
}).catch(() => {
// 取消则关闭弹窗不执行
})
} else {
// 条件不成立则继续往下执行
next()
}
},
methods: {
......
}
更多推荐
已为社区贡献3条内容
所有评论(0)