搜索页需通过 query 参数传递并响应变化，刷新时参数自动保留；应使用 path + query 跳转，监听 $route.query 变化重新拉取数据，并用 :key="$route.fullPath" 避免缓存导致视图不更新，复杂参数需 JSON 序列化及 URL 编码。
搜索结果页通常依赖 query 参数（比如 keyword、page、sort）动态渲染内容，而用户刷新页面时，这些参数必须保留并重新触发数据请求——否则页面会空白或显示默认数据。核心原则是：**query 参数天然支持刷新保留，但需主动读取并响应变化**。
确保 query 参数在 URL 中正确传递
跳转到搜索页时，必须用 path + query 方式，而不是 name + params：
- ✅ 正确（刷新不丢参）：
this.$router.push({ path: '/search', query: { keyword: 'vue', page: '2' } }) - ❌ 错误（刷新后
$route.query为空）：this.$router.push({ name: 'search', params: { keyword: 'vue' } })（除非路由配置了/search/:keyword?，但依然不推荐用于搜索场景）
URL 显示为 /search?keyword=vue&page=2，浏览器刷新时参数自动保留在地址栏，this.$route.query 可直接读取。
监听 query 变化并重新拉取数据
用户手动修改地址栏参数、点击分页、或从其他页带 query 进来，都应触发搜索逻辑。不能只靠 mounted 执行一次：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Vue 2：在
watch: { '$route.query': { handler() { this.fetchResults() }, immediate: true } } - Vue 3（Composition API）：
watch(() => route.query, () => fetchResults(), { immediate: true })
这样，哪怕用户删掉 &page=2 再回车，或从第3页点链接跳转回第1页，都能立刻响应。
避免因 key 复用导致视图不更新
如果搜索页用了 <router-view> 且被 <keep-alive> 包裹，相同路径下 query 改变时组件不会重新创建，mounted 不会再执行——这是常见坑点：
- 方案一（推荐）：给
<router-view>加唯一 key，如:key="$route.fullPath"，强制刷新组件实例 - 方案二：若需缓存部分状态（如滚动位置），可在
activated钩子或watch中判断 query 差异，仅重载数据
处理复杂参数（对象/数组）的序列化
如果搜索条件是多选标签、范围筛选等结构化数据，直接塞进 query 会变成 [object Object]：
- 传参时：
JSON.stringify({ tags: ['vue', 'router'], price: [100, 500] }) - 接收时：
JSON.parse(this.$route.query.filters)（注意加 try-catch 防解析失败） - 补充建议：对长字符串做 URL 安全编码（
encodeURIComponent），避免特殊字符截断
不复杂但容易忽略
