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