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

前言

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

一、使用 onBeforeRouteLeave 导航守卫

1. 安装Vue Router

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

npm install vue-router@next

2. 设置路由和组件

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

<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应用中的编辑误点忘记保存的问题。如果你有任何疑问或建议，请随时在评论区留言。