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


Posted in Javascript onMarch 15, 2018

假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存,是否确认退出?”用户如果点击“确定”,那么不保存当前内容直接退出,用户如果点击“取消”,则取消本次路由跳转,继续留在原来的页面。

尝试的错误做法

一开始的时候我是想着使用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>

实现效果如下:

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

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

以上这篇vue实现提示保存后退出的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
两个数组去重的JS代码
Dec 04 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue内置指令详解
Apr 03 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 #Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 #Javascript
iview中Select 选择器多选校验方法
Mar 15 #Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 #Javascript
基于IView中on-change属性的使用详解
Mar 15 #Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python切片操作深入详解
2018/07/27 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
详解rem 适配布局
2018/10/31 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
童装店创业计划书
2014/01/09 职场文书
社区庆八一活动方案
2014/02/02 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
水电维修专业推荐信
2014/09/06 职场文书
小学运动会报道稿
2014/10/04 职场文书
信仰纪录片观后感
2015/06/08 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js