vue实现提示保存后退出的方法?

Question

vue实现提示保存后退出的方法

Answer 1

假设有这样一个需求，用户在一个页面内编辑文字，但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存，是否确认退出？”用户如果点击“确定”，那么不保存当前内容直接退出，用户如果点击“取消”，则取消本次路由跳转，继续留在原来的页面。尝试的错误做法一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现。代码如下:首先在vuex中新增一个状态值—introduceStateconst store = new Vuex.Store({ &nbsp; strict: true, // process.env.NODE_ENV !== 'production', 直接修改state 抛出异常 &nbsp; state: { &nbsp; &nbsp;.... &nbsp; &nbsp;introduceState: false, &nbsp; &nbsp;.... &nbsp; }, &nbsp; getters: { &nbsp; &nbsp;introduceState: state => state.currentMenus &nbsp; }, &nbsp; mutations: { &nbsp; &nbsp;// 更新introduceState的值 &nbsp; &nbsp;changeIntroduceState (state, value) { &nbsp; &nbsp; state.introduceState = value &nbsp; &nbsp;} &nbsp; } &nbsp;})用户在点击跳转到另一个页面的时候会触发生命周期函数beforeDestroy，在这个函数中我们可以检测用户的编辑内容是否保存，如果尚未保存。如果内容尚未保存，我们就弹出一个提示框，当用户选择取消的时候，就将vuex中的introduceState值更新为true。</script> &nbsp;import { mapGetters, mapActions, mapMutations } from "vuex" &nbsp;export default { &nbsp; data() { &nbsp; &nbsp;return { &nbsp; &nbsp; contentHasSave: false // 记录用户是否已经保存内容 &nbsp; &nbsp;} &nbsp; }, &nbsp; methods： { &nbsp; &nbsp;...mapMutations({ &nbsp; &nbsp; changeIntroduceState: changeIntroduceState &nbsp; &nbsp;}) &nbsp; }， &nbsp; beforeDestory: function(){ &nbsp; &nbsp;if(!contentHasSave){ &nbsp; &nbsp; // 使用element的提示框 &nbsp; &nbsp; this.$confirm('您还未保存简介，确定需要提出吗?', '提示', { &nbsp; &nbsp; &nbsp;confirmButtonText: '确定', &nbsp; &nbsp; &nbsp;cancelButtonText: '取消', &nbsp; &nbsp; &nbsp;type: 'warning' &nbsp; &nbsp; }).then(() => { &nbsp; &nbsp; &nbsp;// 选择确定，正常跳转 &nbsp; &nbsp; }) &nbsp; &nbsp; .catch(() => { &nbsp; &nbsp; &nbsp;// 选择取消 &nbsp; &nbsp; &nbsp;this.changeIntroduceState(true) &nbsp; &nbsp; }) &nbsp; &nbsp;} &nbsp; } &nbsp;} &nbsp;</script>最后在router的beforeEach的导航守卫里监测from为当前页面的所有路由跳转。当state的introduceState为true的时候使用next(false)来取消本次路由跳转import Vue from "vue"; &nbsp;import VueRouter from "vue-router"; &nbsp;import routeConfig from "./routes"; &nbsp;import {sync} from "vuex-router-sync"; &nbsp;import store from "../store"; &nbsp;//加载路由中间件 &nbsp;Vue.use(VueRouter) &nbsp;//定义路由 &nbsp;const router = new VueRouter({ &nbsp; routes: routeConfig, &nbsp; //mode: 'history' &nbsp;}) &nbsp;sync(store, router) &nbsp;router.beforeEach((to, from, next) => { &nbsp; // 简介也未提交，取消跳转 &nbsp; if(from.fullPath === '/adwords/introduce' && store.state.introduceState === 'not-save'){ &nbsp; &nbsp;next(false) &nbsp; } &nbsp;}) &nbsp;export default router这种做法其实是行不通的，因为beforeEach方法的执行其实是在组件beforeDestory的方法之前执行的，也就是说beforeEach执行的时候introduceState的值根本没有被更新为true。正确的做法后来自己去翻vue router的官方文档，找到了一个绝妙的方法，那就是组件内的导航守卫。const Foo = { &nbsp; template: `...`, &nbsp; beforeRouteEnter (to, from, next) { &nbsp; &nbsp;// 在渲染该组件的对应路由被 confirm 前调用 &nbsp; &nbsp;// 不！能！获取组件实例 `this` &nbsp; &nbsp;// 因为当守卫执行前，组件实例还没被创建 &nbsp; }, &nbsp; beforeRouteUpdate (to, from, next) { &nbsp; &nbsp;// 在当前路由改变，但是该组件被复用时调用 &nbsp; &nbsp;// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， &nbsp; &nbsp;// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 &nbsp; &nbsp;// 可以访问组件实例 `this` &nbsp; }, &nbsp; beforeRouteLeave (to, from, next) { &nbsp; &nbsp;// 导航离开该组件的对应路由时调用 &nbsp; &nbsp;// 可以访问组件实例 `this` &nbsp; } &nbsp;}上面的描述很清楚，于是我就在组件的js代码里加了一个beforeRouteLeave方法，然后弹出提示框，实现提示保存后退出的功能。</script> &nbsp;export default { &nbsp; data() { &nbsp; &nbsp;return { &nbsp; &nbsp; contentHasSave: false // 记录用户是否已经保存内容 &nbsp; &nbsp;} &nbsp; }, &nbsp; &nbsp;// 组件内导航钩子，处理未保存退出的情况 &nbsp; beforeRouteLeave: function(to, from , next){ &nbsp; &nbsp;if(this.buttonText === '提交'){ &nbsp; &nbsp; next(false) &nbsp; &nbsp; this.$confirm('您还未保存简介，确定需要提出吗?', '提示', { &nbsp; &nbsp; &nbsp;confirmButtonText: '确定', &nbsp; &nbsp; &nbsp;cancelButtonText: '取消', &nbsp; &nbsp; &nbsp;type: 'warning' &nbsp; &nbsp; }).then(() => { &nbsp; &nbsp; &nbsp;// 选择确定 &nbsp; &nbsp; &nbsp;next() &nbsp; &nbsp; }) &nbsp; &nbsp;} &nbsp; } &nbsp;} &nbsp;</script>实现效果如下：以上这篇vue实现提示保存后退出的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。您可能感兴趣的文章:详解使用Vue Router导航钩子与Vuex来实现后退状态保存vue实现登陆登出的实现示例