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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
从vue源码看props的用法
2019/01/09 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python开发之for循环操作实例详解
2015/11/12 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
办公室主任先进事迹
2014/01/18 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年电教工作总结
2014/12/19 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书