DDR爱好者之家

解决Vue.js应用回退或刷新界面时提示用户保存修改问题
站长资源 2024/12/29 佚名
50 1538
DDR爱好者之家 Design By 杰米

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

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

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

实际上，当用户执行页面刷新时，会触发 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应用回退或刷新界面时提示用户保存修改问题 

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

由于在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应用回退或刷新界面时提示用户保存修改问题 

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

总结

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米