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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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
PHP 八种基本的数据类型小结
2011/06/01 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js charAt的使用示例
2014/02/18 Javascript
AngularJS快速入门
2015/04/02 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
Python单例模式实例详解
2017/03/01 Python
python如何让类支持比较运算
2018/03/20 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python配置grpc环境
2019/01/01 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python批量创建指定名称的文件夹
2019/03/21 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
大学生演讲稿范文
2014/01/11 职场文书
经典广告词大全
2014/03/14 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
党支部先进事迹材料
2014/12/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电