搜索页需通过 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 执行一次：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/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></router-view> 且被 <keep-alive></keep-alive> 包裹，相同路径下 query 改变时组件不会重新创建，mounted 不会再执行——这是常见坑点：
- 方案一（推荐）：给
<router-view></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），避免特殊字符截断
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
