【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验

前言

在Vue3应用中,用户可能会在一个页面上进行数据编辑,如填写表单或修改表格中的数据。当用户在未保存更改的情况下尝试离开当前页面时,我们希望能够弹出提示框,告知用户有未保存的更改,并询问是否确定离开。

一、使用 onBeforeRouteLeave 导航守卫

1. 安装Vue Router

首先,确保你的项目中已经安装了Vue Router。如果还没有安装,可以使用以下命令进行安装:

bash 复制代码
npm install vue-router@next

2. 设置路由和组件

假设我们编辑数据页面。在这个组件中,我们需要定义onBeforeRouteLeave导航守卫。

TypeScript 复制代码
<script>
import {defineComponent} from 'vue';
import {onBeforeRouteLeave} from "vue-router";

export default defineComponent({
  setup() {

    // 导航守卫
    onBeforeRouteLeave((to, from, next) => {
      // 换成各自UI对话框组件
      const reply = window.confirm('确定离开当前页面?');
      if (reply) {
        next(); // 用户确认离开,继续导航
      } else {
        next(false); // 用户取消离开,阻止导航
      }
    });


    return {
      //...
    }
  }
})
</script>

二、效果验证

现在,当你修改表单中的数据并尝试离开页面时,会弹出一个确认对话框,提示你有未保存的更改。

总结

通过利用Vue Router的onBeforeRouteLeave导航守卫,我们可以有效地防止用户在未保存更改的情况下误点离开页面。这种方法不仅简单实用,而且能够显著提升用户体验。在实际开发中,你还可以根据具体需求对导航守卫进行更多的自定义和扩展。

希望本文能够帮助你解决Vue3应用中的编辑误点忘记保存的问题。如果你有任何疑问或建议,请随时在评论区留言。

相关推荐
Hilaku5 分钟前
“全栈”正在淘汰“前端”吗?一个前端专家的焦虑与思考
前端·面试·程序员
前端大卫9 分钟前
页面加载太慢?一文搞懂 JS 和 CSS 阻塞机制!
前端·javascript
十步杀一人_千里不留行13 分钟前
I Built an Offline-Capable App by Myself: React Native Frontend, C# Backend
前端·react native·typescript
SoaringHeart41 分钟前
Flutter小技巧:IM音浪效果实现
前端·flutter
小old弟42 分钟前
亲测autojs自动化,关闭应用的三种方法
前端
AndyLaw42 分钟前
我用 ChatGPT 起手、脚本改造,给孩子做了一个绘本
前端·javascript·openai
放空欧巴43 分钟前
学习 elpis 有感 -- 初识 elpis-core (实现简易版 Egg.js)
前端
前端开发呀44 分钟前
震惊!开启浏览器翻译竟会导致react应用报错?
前端·react.js
Sun_light1 小时前
从 0 到 1 实现低代码编辑器的基本功能
前端·react.js·typescript