URL中问号后的key=value数据即query参数，不改变路由匹配，适合传筛选、分页等临时状态；推荐对象方式传参，用useRoute().query获取响应式参数。
路由 query 参数就是 URL 中问号后面那一串 key=value 形式的数据，比如 /news/detail?id=1024&title=Vue3新特性。它不改变路由匹配逻辑，只附加信息，适合传筛选条件、分页、临时状态等。
怎么传 query 参数？两种主流写法
推荐用对象方式，清晰安全；字符串方式易出错，仅限简单场景。
-
模板中用
对象传参（推荐） ：<router-link :to="{ path: '/news/detail', query: { id: item.id, title: item.title } }">{{ item.title }}</router-link> -
编程式导航传参（常用在按钮点击、表单提交后）：
router.push({ path: '/search', query: { q: '前端', page: 1, sort: 'date' } }) - ⚠️ 避免字符串拼接写法：
<router-link to="/news/detail?id=1024&title=Vue3"></router-link>—— 容易漏转义、难维护、无法动态插入变量
怎么在目标页面拿到 query 参数？
使用 useRoute()（Vue3 Composition API）或 this.$route（Vue2/Options API），从 .query 对象里取值。注意：它是响应式的，参数变化时能自动更新。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- Vue3 写法（
setup中）：
import { useRoute } from 'vue-router'<br>const route = useRoute()<br>console.log(route.query.id) // → '1024'<br>console.log(route.query.title) // → 'Vue3新特性' - 直接在模板中使用（支持响应式）：
<h2>{{ $route.query.title || '未命名新闻' }}</h2>
常见问题与应对
query 看似简单，但几个细节容易踩坑：
-
刷新页面后参数还在：query 是 URL 的一部分，浏览器会完整保留，所以组件重载后
route.query依然可用 -
中文或特殊字符要自动编码：Vue Router 会自动调用
encodeURIComponent，传{ title: '前端开发！' }会变成?title=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%81，无需手动处理 -
同一路由内切换 query（如翻页）组件不刷新？：默认复用组件，但
route.query已更新。可在watch中监听：watch(() => route.query.page, (newVal) => { fetchList(newVal) }) -
想清空 query 又不跳转？：
router.replace({ path: route.path, query: {} })—— 替换当前历史记录，URL 清空 query 且不新增记录
什么时候该用 query，而不是 params？
看参数是否“可选”和“非资源标识”：
- ✅ 用 query：
搜索关键词（?q=vue）、分页（?page=2）、排序（?sort=desc）、标签筛选（?tag=router）——这些不是页面唯一标识，可有可无 - ❌ 别用 query：
用户详情页的id如果是核心资源标识（如/user/123），更推荐用params，URL 更语义化、SEO 更友好、路径结构更稳定
