Vue产品编辑页路由切换前未弹出未保存确认框的问题求助

我来帮你搞定这个组件切换产品时的未保存修改校验问题——你找对了beforeRouteUpdate这个钩子，只是没正确控制next()的调用时机，导致弹窗没生效。下面是适配你需求的完整实现方案：

核心实现思路 #

1. 在beforeRouteUpdate中先判断是否存在未保存修改
2. 若有修改，弹出确认对话框：
   • 用户点击「Save」：先执行保存操作，完成后再允许路由跳转
   • 用户点击「Cancel」：阻止路由跳转，留在当前编辑页面
3. 无未保存修改时，直接放行路由，保证原有的watch:$route能正常触发产品详情获取

修正后的完整代码 #

<script>
export default {
  watch: {
    $route: 'fetchProductDetais'
  },
  beforeRouteUpdate(to, from, next) {
    // 注意：你代码里的dataCahnged是拼写错误，要改成dataChanged
    if (this.dataChanged.length > 0) {
      dialog.confirm({
        message: `You have unsaved changes, don't forget to save them.`,
        confirmText: 'Save',
        cancelText: 'Cancel',
        onConfirm: async () => {
          // 等待保存操作完成（如果update是异步接口请求，必须用async/await）
          await this.update();
          // 保存成功后放行路由，此时watch会自动触发fetchProductDetais
          next();
        },
        onCancel: () => {
          // 取消路由跳转，留在当前页面
          next(false);
        }
      });
    } else {
      // 没有未修改内容，直接放行路由
      next();
    }
  },
  methods: {
    fetchProductDetais() {
      // 你的产品详情获取逻辑
    },
    async update() {
      try {
        // 这里编写你的保存接口调用逻辑
        // 保存成功后清空未修改标记数组
        this.dataChanged = [];
      } catch (error) {
        console.error('保存失败:', error);
        // 保存失败时阻止路由跳转，可额外添加错误提示
        next(false);
      }
    },
    cancel() {
      // 取消修改的逻辑：恢复原始数据、清空未修改标记
      this.dataChanged = [];
      // 若用户取消后想继续跳转，可在这里调用next()，通常取消是留在当前页面
    }
  }
}
</script>

关键细节提醒 #

• 拼写修正：你代码里的dataCahnged是笔误，应该是dataChanged，这个小错误会直接导致校验逻辑失效，一定要修正。
• 异步处理：如果update涉及后端接口请求这类异步操作，必须用async/await等待操作完成，否则路由会在保存成功前就跳转，造成数据丢失。
• next()的作用：beforeRouteUpdate必须调用next()来控制路由走向：
  • next()：允许路由更新，此时watch:$route会正常触发fetchProductDetais获取新产品数据
  • next(false)：阻止路由跳转，停留在当前编辑页面

这样修改后，既能在切换产品前校验未保存修改并弹出确认框，又完全不影响原有路由监听获取产品详情的功能。

内容的提问来源于stack exchange，提问作者NewTech Lover