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 更适合需要拦截、校验或异步等待的场景。