Vue Router 中通过 this.$router.push 传递 query 参数最常用，以 ?key=value 形式拼在 URL 后，刷新不丢失；支持编程式（path/name + query）和声明式（ :to）两种方式，目标组件用 this.$route.query（Vue 2）或 useRoute().query（Vue 3）获取，适用于非敏感、可分享的筛选条件等。
Vue Router 中用 this.$router.push 传递 query 查询参数是最常用、最直接的方式，参数会以 ?key=value 形式拼在 URL 后面，刷新页面也不会丢失。
怎么传：编程式跳转（推荐）
在组件方法中调用 push，传入一个对象，指定 path 或 name，再带上 query 字段：
-
用 path 跳转（无需命名路由）：
this.$router.push({ path: '/search', query: { q: 'vue', page: 1 } })
→ 跳转后 URL 为：/search?q=vue&page=1 -
用 name 跳转（更安全，推荐）：
this.$router.push({ name: 'Search', query: { q: 'vue', page: 1 } })
需确保路由配置里已定义name: 'Search'
怎么传：声明式跳转（<router-link></router-link>）
在模板中使用 <router-link></router-link>，把 query 写在 :to 对象里：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
<router-link :to="{ name: 'Detail', query: { id: 456, from: 'list' } }">查看详情</router-link>- 等价于：
<router-link to="/detail?id=456&from=list">查看详情</router-link>（不推荐手动拼字符串）
怎么收：在目标组件里获取 query 参数
进入目标页面后，通过 this.$route.query（Vue 2）或 useRoute().query（Vue 3 Composition API）读取：
立即学习“前端免费学习笔记（深入）”；
- Vue 2（Options API）：
created() { console.log(this.$route.query.id) // 456 } - Vue 3（Setup Script）：
import { useRoute } from 'vue-router'<br>const route = useRoute()<br>console.log(route.query.id) // 456
注意事项
query 参数不需要提前在路由配置中声明，也不依赖路径是否含动态段；它适合传筛选条件、分页、来源标识等非敏感、可分享的可选数据。避免用 query 传大量数据或敏感信息（如 token、密码），URL 长度和可见性是限制因素。
