onBeforeRouteUpdate 在组合式 API 中怎么用？处理搜索结果页跳转逻辑-Vue.js-PHP中文网

onbeforerouteupdate 用于监听同一组件内动态路由参数变化时的导航更新，如 /search/123 → /search/456，仅当 params 改变时触发，不响应 query 或 hash 变化，适合需在导航前干预的场景。

onbeforerouteupdate 在组合式 api 中怎么用？处理搜索结果页跳转逻辑

onBeforeRouteUpdate 在组合式 API 中主要用于监听**同一组件内动态路由参数变化时的导航更新**，比如从 /search/123 跳转到 /search/456 —— 组件不销毁重挂载，但需要刷新数据。它特别适合搜索结果页这类场景：用户点击不同结果项（ID 变），页面复用但内容要更新。

核心使用方式：在 `<script setup></script>` 中直接调用

无需访问 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 跳转）。