解决Vue.js应用回退或刷新界面时提示用户保存修改问题

在实际应用中，运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失。可以采用以下两种手段防止运营编辑时丢失数据：

在运营人员刷新页面或回退时，自动保留数据至浏览器端本地存储，在重新进入编辑页面时再将数据从本地存储中加载到编辑界面。
第二种方法是在运营人员刷新或回退时，强提示运营人员有修改的数据尚未保存，询问是否继续。

无认采用哪一种方式，在技术实现上，我们需要首先能够监听到用户执行回退或刷新页面的动作。

实际上，当用户执行页面刷新时，会触发 window 对象上的 onBeforeUnload 事件。所以，我们需要在页面加载时开始监听此事件。在Vue.js应用中，我们可以在Vue.js的 mounted 生命周期事件函数中开始监听。

mounted() {
  window.onbeforeunload = e => {
    if (!this.modified) {
    return;
    }
    // 通知浏览器不要执行与事件关联的默认动作
    e.preventDefault();
    // Chrome 需要 returnValue 被设置成空字符串
    e.returnValue = '';
  };
},

有了以上的代码，只要我们在修改了数据以后，将 modified 的值改为true，则可以在刷新整个页面时弹出如下提示：

当用户点击上述对话框的[ 取消 ]按钮后，会取消刷新动作，当用户选择[ 重新加载 ]后，浏览器会强制进行页面的刷新。

由于在Vue.js应用中，通常是一个页面的应用，所有的子页面享用一个window对象，所以，如果在一个Vue.js页面组件中增加了对onBeforUnload事件的监听，则可能会影响其它页面组件的相关行为，而在其他页面（如，仅浏览数据的页面）是不希望进行相关的提示的，所以，我们需要在Vue.js组件卸载的时候取消对onBeforeUnload事件的监听。

destroyed() {
  // 取消对事件的监听
  window.onbeforeunload = null;
  },

用户除了通过浏览器刷新操作退出外，还有两种可能的退出途径：

  • 点击浏览器的前进或回退操作按钮
  • 点击单页面中的前端路由链接

对于以上两种退出途径，onBeforeLoad事件通常是拦截不到相应的事件的，因为这两种操作一般是前端路由的行为。

既然是前端路由的行为，我们就需要在前端路由事件上下功夫。可喜的是，前端路由vue-router为我们提供了 导航守卫 的能力。关于vue-router导航守卫的相关知识，大家可以参考： vue-router前端路由导航守卫 。

前端路由导航守卫分为全局守卫、独享守卫、组件内守卫等。这里我们使用的是组件内守卫。

组件内守卫有以下三种

  • beforeRouteEnter 组件第一次被渲染时调用
  • beforeRouteUpdate 路由改变但组件被复用时调用
  • beforeRouteLeave 导航离开组件时调用

显而易见，我们需要监听并处理 beforeRouteLeave 事件。

beforeRouteLeave(to, from, next) {
  if (!this.modified) {
    next();
    return;
  }
  this.$confirm('当前页面数据未保存，确定要离开？', '提示', { type: 'warning' })
  .then(() => {
    next();
  })
  .catch(() => {
   next(false);
  });
},

有了以上的代码，当我们在进行路由切换时（点击浏览器回退按钮或点击页面中的其它路由链接）就会提示如下的对话框：

当用户选择取消时，回到原界面，当用户点击确定按钮后，页面强制刷新。

总结

以上所述是小编给大家介绍的解决Vue.js应用回退或刷新界面时提示用户保存修改问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小会及时回复大家的！

赞 (0)

相关推荐

  • vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval

  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

  • vue.js整合vux中的上拉加载下拉刷新实例教程

    vue.js整合vux中的上拉加载下拉刷新实例教程

    前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图 创建项目 使用vue-cli 创建一个vue项目 安装vux

  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新. 首先把基本的样式写好,这里就略过了,然后引入better-scroll库 import BScroll from 'better-scroll'

  • 解决Vue.js应用回退或刷新界面时提示用户保存修改问题

    在实际应用中,运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失.可以采用以下两种手段防止运营编辑时丢失数据: 在运营人员刷新页面或回退时,自动保留数据至浏览器端本地存储,在重新进入编辑页面时再将数据从本地存储中加载到编辑界面. 第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续. 无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作. 实际上,当用户执行页面刷新时,会触发 window

  • 解决Vue.js由于延时显示了{{message}}引用界面的问题

    在使用Vue写应用时发现一个问题,每当进入一些有延时的(如网络API请求)操作时,会先闪一下未编译的 Mustache 标签{{ message }},这让人很不爽. 在官网找到了解决方案:v-cloak 参照官网做法: 定义[v-cloak]的style <style> [v-cloak] { display: none; } </style> 使用了Mustache标签的地方加上v-cloak <div v-cloak>{{ message }}</div&g

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • 解决ios微信页面回退不刷新的问题

    在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); }) 以上这篇解决ios微信页面回退不刷

  • 解决vue.js not detected的问题

    最近在看vue的时候,发现之前装过的vuedevtools提示vue.js is not detected.重装了一次后,发现对于没有应用vue框架的页面,的确是检测不到vue.js,所以报这个很正常:切换到有vue.js资源的页面,调试界面就会自动检测出vue插件(如果还是报错,具体下文有讲).如果你跟我一样上不了chrome商店,那么希望下面的步骤可以帮到你. 首先下载插件: https://devtools.vuejs.org/guide/installation.html 之后打开chr

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考

  • 解决vue.js this.$router.push无效的问题

    如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu

  • 快速解决vue.js 模板和jinja 模板冲突的问题

    jinjia和vue.js默认的模板转义符都是{{}} 目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]} 版本1.x和2.x方法如下 // 1.x Vue.config.delimiters = ['{[', ']}'] // 2.x new Vue({ delimiters: ['{[', ']}'] }) 以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

随机推荐