Vue Router 怎么使用组件内守卫处理离开确认提示-Vue.js-PHP中文网

onbeforerouteleave 是 vue router 中处理离开前确认的标准方式，需在 setup 中注册，支持原生 confirm 或 ui 弹窗异步保存，并需精准管理 isdirty 状态及封装为组合函数。

vue router 怎么使用组件内守卫处理离开确认提示

在 Vue Router 中，组件内守卫 onBeforeRouteLeave 是处理“离开前确认”的标准且推荐方式。它只在当前组件即将被卸载（即路由要离开）时触发，逻辑聚焦、无副作用，适合表单未保存、编辑中退出等场景。

一、基础写法：拦截 + 原生 confirm

必须在组件 setup 阶段注册，不能放在条件语句或异步回调里：

注意：Vue 3 Composition API 中不支持直接写 beforeRouteLeave 选项，必须用 onBeforeRouteLeave 函数。

导入并调用 onBeforeRouteLeave
在回调中判断是否需要提醒（如表单已修改）
调用 next(false) 阻止导航，next() 放行

示例代码：

import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'

const isDirty = ref(false)

// 监听表单变化，设为 true（例如 v-model 绑定后）
// const formData = ref({ ... })
// watch(formData, () => { isDirty.value = true }, { deep: true })

onBeforeRouteLeave((to, from, next) => {
  if (isDirty.value) {
    const confirmed = window.confirm('您有未保存的更改，确定要离开吗？')
    confirmed ? next() : next(false)
  } else {
    next()
  }
})

二、进阶写法：配合 UI 组件与异步保存

原生 confirm 样式不可控、体验差。更推荐用 ElMessageBox、Antd 的 Modal 等弹窗组件，并支持在用户确认后执行保存逻辑：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

弹窗需使用 await 等待用户操作（Element Plus 的 ElMessageBox 返回 Promise）
若用户点击“保存并离开”，先 await 调用保存接口，再 next()
若用户点击“放弃更改”，直接 next()；点击“取消”，则 next(false)

示例（Element Plus）：

import { onBeforeRouteLeave } from 'vue-router'
import { ElMessageBox } from 'element-plus'

onBeforeRouteLeave(async (to, from, next) => {
  if (!isDirty.value) return next()

  try {
    const action = await ElMessageBox.confirm(
      '检测到未保存的更改，是否保存后再离开？',
      '提示',
      { distinguishCancelAndClose: true, confirmButtonText: '保存', cancelButtonText: '放弃' }
    )
    if (action === 'confirm') {
      await saveForm() // 自定义保存逻辑
      next()
    } else {
      next()
    }
  } catch {
    next(false)
  }
})