vue 的 watch 不直接监听 url 参数变化，需通过监听 $route.query（vue router）或 urlsearchparams（原生）实现；推荐精准监听 route.query.q 等特定参数并配合 router.push 更新 url，避免循环调用。
Vue 的 watch 本身不直接监听 URL 参数变化，但可以通过监听 $route 对象（Vue Router）或 URLSearchParams（原生）来实现搜索参数变更时自动刷新结果。关键在于把“URL 参数”映射为可响应式监听的数据源。
监听 $route.query（Vue Router v3/v4）
在基于 Vue Router 的单页应用中，路由查询参数（如 ?q=vue&page=2）会反映在 $route.query 上。该对象是响应式的，可直接用 watch 监听：
- 在组件的
setup()中（Vue 3 + Composition API）：
watch(() => route.query, (newQuery, oldQuery) => {
if (newQuery.q !== oldQuery.q || newQuery.page !== oldQuery.page) {
fetchSearchResults(newQuery); // 触发搜索逻辑
}
}, { immediate: true }); // 首次加载也执行
- 在 Vue 2 选项 API 中：
'$route.query': {
handler(newQuery) {
this.fetchResults(newQuery);
},
immediate: true,
deep: true
}
}
监听特定参数而非整个 query 对象
若只关心某个参数（如 q 或 category），可精准监听其变化，减少不必要的刷新：
- Vue 3（推荐）：
watch(() => route.query.q, (newQ, oldQ) => {
if (newQ !== oldQ) {
this.searchTerm = newQ || '';
debounceFetch(newQ); // 建议防抖
}
}, { immediate: true });
- Vue 2：
'$route.query.q': {
handler(val) { this.onQueryChange(val); },
immediate: true
}
}
配合编程式导航更新 URL 并触发监听
用户输入搜索词后，需用 router.push() 更新 URL，才能让 watch 捕获变化：
- 提交搜索时更新地址栏（保持历史记录、支持前进/后退）：
const search = () => {
router.push({
path: '/search',
query: { q: searchTerm.value, page: '1' }
});
};
⚠️ 注意：避免在 watch 回调里又调用 router.push 导致循环（例如未加条件判断就重写相同 query）。
无 Vue Router 场景：监听原生 URL 变化
纯静态页面或非 Vue Router 项目，可用 URLSearchParams + popstate 事件手动监听：
- 监听浏览器前进/后退（URL 改变但未刷新）：
const params = new URLSearchParams(window.location.search);
const q = params.get('q');
if (q !== currentQuery) {
currentQuery = q;
fetchResults(q);
}
};
window.addEventListener('popstate', updateFromUrl);
updateFromUrl(); // 初始化
如需监听地址栏实时编辑（如用户手动改 URL 后回车），需结合 beforeunload 或定时轮询（不推荐），一般 popstate + 页面加载时解析已足够。
