onBeforeRouteUpdate 用于监听同一组件内动态路由参数变化时的导航更新，如 /search/123 → /search/456，仅当 params 改变时触发，不响应 query 或 hash 变化，适合需在导航前干预的场景。
onBeforeRouteUpdate 在组合式 API 中主要用于监听**同一组件内动态路由参数变化时的导航更新**，比如从 /search/123 跳转到 /search/456 —— 组件不销毁重挂载，但需要刷新数据。它特别适合搜索结果页这类场景：用户点击不同结果项（ID 变），页面复用但内容要更新。
核心使用方式：在 <script setup> 中直接调用
无需访问 this，也不依赖组件实例生命周期，只需导入并传入守卫函数：
- 导入：
import { onBeforeRouteUpdate } from 'vue-router' - 在
setup内调用，接收一个异步或同步的导航守卫函数，参数为(to, from) - 函数内可执行数据拉取、状态重置、权限校验等逻辑
搜索结果页典型应用：只在 ID 改变时重新请求数据
假设你的搜索结果页路径是 /result/:id，用户点击不同结果会跳转到不同 :id，但始终在同一个组件中渲染。你不想每次 query 或 hash 变就重载数据，只关心 id 是否真变了：
<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
const resultData = ref(null)
onBeforeRouteUpdate(async (to, from) => {
// 仅当 :id 参数实际变化时才获取新数据
if (to.params.id !== from.params.id) {
resultData.value = await fetchSearchResult(to.params.id)
}
})
</script>
配合 useRoute + watch 的替代方案（更轻量）
如果只是响应参数变化、不需要拦截或控制导航流程，用 watch 监听 route.params.id 更简洁直观，且天然响应式：
<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()
const resultData = ref(null)
watch(
() => route.params.id,
async (newId) => {
if (newId) {
resultData.value = await fetchSearchResult(newId)
}
},
{ immediate: true } // 页面加载时也触发一次
)
</script>
这个方式更适合纯数据更新场景；而 onBeforeRouteUpdate 更适合需**在导航确认前干预行为**的情况（例如检查用户是否修改未保存、弹窗确认、或拒绝非法 ID 跳转）。
注意边界情况：它不响应 query/hash 变化
onBeforeRouteUpdate 仅在「匹配相同路由记录但参数变更」时触发，比如：
- ✅
/result/100→/result/200（触发） - ❌
/result/100→/result/100?tab=detail（不触发） - ❌
/result/100#section2→/result/100#section3（不触发）
若需响应 query 变化，请改用 watch(() => route.query) 或全局守卫。
