首页 / VUE / vue实现提示保存后退出的方法
vue实现提示保存后退出的方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue实现提示保存后退出的方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3713字,纯文字阅读大概需要6分钟。
内容图文
![vue实现提示保存后退出的方法](/upload/InfoBanner/zyjiaocheng/289/5ab08e3fb8394766992f044d717b17f4.jpg)
假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存,是否确认退出?”用户如果点击“确定”,那么不保存当前内容直接退出,用户如果点击“取消”,则取消本次路由跳转,继续留在原来的页面。
尝试的错误做法
一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现。代码如下:
首先在vuex中新增一个状态值—introduceState
const store = new Vuex.Store({ strict: true, // process.env.NODE_ENV !== 'production', 直接修改state 抛出异常 state: { .... introduceState: false, .... }, getters: { introduceState: state => state.currentMenus }, mutations: { // 更新introduceState的值 changeIntroduceState (state, value) { state.introduceState = value } } })
用户在点击跳转到另一个页面的时候会触发生命周期函数beforeDestroy,在这个函数中我们可以检测用户的编辑内容是否保存,如果尚未保存。
如果内容尚未保存,我们就弹出一个提示框,当用户选择取消的时候,就将vuex中的introduceState值更新为true。
</script> 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) }) } } } </script>
最后在router的beforeEach的导航守卫里监测from为当前页面的所有路由跳转。当state的introduceState为true的时候使用next(false)来取消本次路由跳转
import Vue from "vue"; import VueRouter from "vue-router"; import routeConfig from "./routes"; import {sync} from "vuex-router-sync"; import store from "../store"; //加载路由中间件 Vue.use(VueRouter) //定义路由 const router = new VueRouter({ routes: routeConfig, //mode: 'history' }) sync(store, router) router.beforeEach((to, from, next) => { // 简介也未提交,取消跳转 if(from.fullPath === '/adwords/introduce' && store.state.introduceState === 'not-save'){ next(false) } }) export default router
这种做法其实是行不通的,因为beforeEach方法的执行其实是在组件beforeDestory的方法之前执行的,也就是说beforeEach执行的时候introduceState的值根本没有被更新为true。
正确的做法
后来自己去翻vue router的官方文档,找到了一个绝妙的方法,那就是组件内的导航守卫。
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }
上面的描述很清楚,于是我就在组件的js代码里加了一个beforeRouteLeave方法,然后弹出提示框,实现提示保存后退出的功能。
</script> export default { data() { return { contentHasSave: false // 记录用户是否已经保存内容 } }, // 组件内导航钩子,处理未保存退出的情况 beforeRouteLeave: function(to, from , next){ if(this.buttonText === '提交'){ next(false) this.$confirm('您还未保存简介,确定需要提出吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 选择确定 next() }) } } } </script>
实现效果如下:
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
js中如何完美的解析数据
解决使用vue.js路由后失效的问题
vue实现的上传图片到数据库并显示到页面功能示例
以上就是vue实现提示保存后退出的方法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue实现提示保存后退出的方法全部内容,希望文章能够帮你解决vue实现提示保存后退出的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。