如何利用 onBeforeRouteLeave 实现更简洁的离开守卫？组合式 API 实战-Vue.js-PHP中文网

onBeforeRouteLeave 是 Vue 3 组合式 API 中推荐的页面级离开守卫，接收 (to, from) 参数，通过返回布尔值或 Promise 控制导航，支持逻辑复用、条件拦截与自定义 Hook 封装。

如何利用 onbeforerouteleave 实现更简洁的离开守卫？组合式 api 实战

在 Vue 3 组合式 API 中，onBeforeRouteLeave 是实现页面级离开守卫的推荐方式，它比选项式 API 的 beforeRouteLeave 更轻量、更语义清晰，且天然支持逻辑复用与条件控制。

直接在 setup 中注册离开守卫

无需额外声明组件选项，直接在 setup() 或 onMounted 后调用即可。守卫函数接收三个参数：(to, from, next)（Vue Router 4.1+ 已弃用 next 回调，改用返回布尔值或 Promise）。

返回 false：取消导航，保持当前页面
返回 true 或不返回：允许离开
返回 Promise（如调用确认弹窗）：等待 resolve 后决定是否离开

示例：

import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    const formData = ref({ title: '', content: '' })
    const isDirty = computed(() => !isEqual(formData.value, initialData))

    onBeforeRouteLeave((to, from) => {
      if (isDirty.value) {
        return window.confirm('有未保存的更改，确定要离开吗？')
      }
    })

    return { formData }
  }
}

配合状态管理做精细化控制

当表单状态分散在多个子组件或 store 中时，可在守卫中读取 pinia 或 ref 状态，避免手动维护“是否已修改”标志。

使用 useStore() 获取 store 实例，检查 hasUnsavedChanges 等字段
监听多个响应式源（如 watchEffect + onBeforeRouteLeave 联动）
对特定路由目标放行（例如只拦截跳转到 /dashboard，不限制跳转到 /help）

示例（放行内部帮助页）：

onBeforeRouteLeave((to) => {
  if (isDirty.value && !to.path.startsWith('/help')) {
    return confirmLeave()
  }
})

封装可复用的自定义守卫 Hook

将通用逻辑抽离为 useRouteLeaveGuard，提升跨组件一致性：

接受判断函数（如 shouldBlock）和提示文案
内部自动处理 Promise 弹窗（如使用 Element Plus 的 ElMessageBox）
支持动态启用/禁用（例如提交成功后调用 disable()）

简易实现：

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

export function useRouteLeaveGuard(shouldBlock, message = '确认离开？') {
  const unguard = onBeforeRouteLeave((to, from) => {
    if (shouldBlock()) {
      return ElMessageBox.confirm(message)
        .then(() => true)
        .catch(() => false)
    }
  })

  return { disable: () => unguard() }
}