beforerouteleave用于拦截路由离开，需手动判断isdirty状态并调用next(false)中断后弹窗确认，vue 3中必须在setup顶层用onbeforerouteleave注册。
在组件内用 beforeRouteLeave 拦截离开操作，核心是“判断是否该拦 + 拦了之后怎么让用户选”。它不是自动弹窗，而是给你一个机会做逻辑控制，尤其适合表单未保存场景。
必须写在组件定义里，不能放异步或条件分支中
Vue 3（Composition API）必须用 onBeforeRouteLeave，且要在 setup() 顶层调用：
- ✅ 正确：直接在
setup()开头写onBeforeRouteLeave((to, from, next) => { ... }) - ❌ 错误：放在
watch回调、if判断块里，或等接口返回后再注册 —— 守卫不会生效 - Options API 更简单：直接作为组件选项属性，写
beforeRouteLeave(to, from, next) { ... }
关键要自己判断“要不要拦”，不能只靠守卫触发
守卫本身不决定拦不拦，它只是个钩子。你需要配合一个状态变量（比如 isDirty）来标记数据是否被修改：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章