beforeRouteUpdate专用于路由复用时响应参数变化，需满足同组件渲染且非完全跳转两个条件；Vue 2在组件选项中定义，Vue 3用onBeforeRouteUpdate；watch $route更轻量，适合纯响应式更新。
当路由复用同一个组件（比如从 /user/1 跳到 /user/2），组件不会被销毁重建，因此 created、mounted 等生命周期钩子不会再次触发。此时想响应参数变化，就得靠 beforeRouteUpdate —— 它专为这种“组件复用+路由更新”场景设计。
beforeRouteUpdate 的触发条件
这个守卫只在满足两个前提时执行：
- 目标路由和当前路由渲染的是同一个组件（即
component相同） - 路由发生了变化，但不是完全跳转到新组件（例如
params或query改变）
Vue 2 中的写法
直接在组件选项中定义方法：
注意：必须调用 next()，否则导航会卡住
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
export default {
beforeRouteUpdate(to, from, next) {
console.log('params.id 从', from.params.id, '变为', to.params.id)
// 可在此重新获取数据、重置状态等
this.fetchUserData(to.params.id)
next()
}
}
Vue 3 组合式 API 写法
使用 onBeforeRouteUpdate 函数，需在 setup 中调用：
import { onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
console.log('路由更新：', from.path, '→', to.path)
if (to.params.id !== from.params.id) {
// 仅当 id 变化时刷新
loadData(to.params.id)
}
})
return {}
}
}
配合 watch 更灵活的替代方案
如果只是读取参数或 query 变化，不涉及导航控制，watch $route 更轻量：
- Vue 2：
watch: { '$route': 'handleRouteChange' } - Vue 3：
watch(() => route.params.id, (newId) => {...})，其中route = useRoute()
这种方式无需 next()，适合纯响应式更新；而 beforeRouteUpdate 更适合需要拦截、校验或异步等待的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
