vue实现提示保存后退出的方法
|
假设有这样一个需求，用户在一个页面内编辑文字，但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存，是否确认退出？”用户如果点击“确定”，那么不保存当前内容直接退出，用户如果点击“取消”，则取消本次路由跳转，继续留在原来的页面。 尝试的错误做法一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现。代码如下: 首先在vuex中新增一个状态值—introduceState state.currentMenus
},mutations: {
// 更新introduceState的值
changeIntroduceState (state,value) {
state.introduceState = value
}
}
})
用户在点击跳转到另一个页面的时候会触发生命周期函数beforeDestroy，在这个函数中我们可以检测用户的编辑内容是否保存，如果尚未保存。 如果内容尚未保存，我们就弹出一个提示框，当用户选择取消的时候，就将vuex中的introduceState值更新为true。
import { mapGetters,mapActions,mapMutations } from "vuex"
export default {
data() {
return {
contentHasSave: false // 记录用户是否已经保存内容
}
},methods： {
...mapMutations({
changeIntroduceState: changeIntroduceState
})
}，
beforeDestory: function(){
if(!contentHasSave){
// 使用element的提示框
this.$confirm('您还未保存简介，确定需要提出吗?','提示',{
confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
}).then(() => {
// 选择确定，正常跳转
})
.catch(() => {
// 选择取消
this.changeIntroduceState(true)
})
}
}
}
最后在router的beforeEach的导航守卫里监测from为当前页面的所有路由跳转。当state的introduceState为true的时候使用next(false)来取消本次路由跳转 {
// 简介也未提交，取消跳转
if(from.fullPath === '/adwords/introduce' && store.state.introduceState === 'not-save'){
next(false)
}
})
export default router
这种做法其实是行不通的，因为beforeEach方法的执行其实是在组件beforeDestory的方法之前执行的，也就是说beforeEach执行的时候introduceState的值根本没有被更新为true。 正确的做法后来自己去翻vue router的官方文档，找到了一个绝妙的方法，那就是组件内的导航守卫。 上面的描述很清楚，于是我就在组件的js代码里加了一个beforeRouteLeave方法，然后弹出提示框，实现提示保存后退出的功能。
export default {
data() {
return {
contentHasSave: false // 记录用户是否已经保存内容
}
},// 组件内导航钩子，处理未保存退出的情况
beforeRouteLeave: function(to,next){
if(this.buttonText === '提交'){
next(false)
this.$confirm('您还未保存简介，确定需要提出吗?',type: 'warning'
}).then(() => {
// 选择确定
next()
})
}
}
}
实现效果如下：
以上这篇vue实现提示保存后退出的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
