当前位置：首页 > news >正文

vue的＜router-link＞的to里面的query和params的区别

news 2025/6/10 7:15:33

核心比喻：寄快递

想象一下您要寄一个快递：

params 就像是【收件地址】：例如 “北京市朝阳区幸福大街 123 号”。这是找到目的地所必需的核心信息，它直接构成了地址的主体部分。没有这个地址，快递员就不知道把包裹送到哪里。
query 就像是【备注信息】：例如 “请在下午三点后派送，来自朋友的礼物”。这些是附加信息，它们不是地址本身，但能为快递员提供额外的操作指令或上下文。即使没有这些备注，快递也依然能送到，只是可能没那么精确或贴心。

详细对比

特性	`params` (路由参数)	`query` (查询参数)
URL 外观	是 URL 路径的一部分，看起来更美观、语义化。例如：`/user/123`	跟在 URL 路径后面，由 `?` 开始，键值对形式，`&` 分隔。例如：`/search?keyword=vue&page=1`
路由配置	必须在 `router/index.js` 中预先定义动态路由段（使用冒号 `:`）。例如：`{ path: '/user/:id', ... }`	不需要任何预先配置，可以附加在任何路由后面。
传递方式	在 `<router-link>` 中，必须使用 `name` 来指定路由，不能用 `path`。	既可以用 `name` 也可以用 `path` 来指定路由。
数据丢失	如果 `params` 仅在 `<router-link>` 的 `params` 对象中传递而没有体现在 URL 上，页面刷新后数据会丢失。（但正确配置后，它在URL中，不会丢失）	由于 `query` 参数始终在 URL 中，页面刷新后数据不会丢失。
获取方式	在目标组件中通过 `this.$route.params` 获取。	在目标组件中通过 `this.$route.query` 获取。

`params` 的使用场景与示例

params 主要用于传递唯一标识符或必需的参数，通常用来展示一个特定资源的详情页。

使用场景：

查看用户个人主页 (ID: 123) -> /user/123
显示某篇博客文章 (文章 slug: vue-router-guide) -> /post/vue-router-guide
编辑某个商品信息 (商品 ID: 8806) -> /products/8806/edit

示例代码：

1. 配置路由 (router/index.js)
你必须在这里定义一个动态段 :id。

const routes = [{path: '/user/:id', // :id 就是一个 paramname: 'UserProfile', // 使用 params 时，强烈建议给路由命名component: () => import('../views/UserProfile.vue')}
]

2. 创建链接 (<router-link>)
关键点： 必须使用 name，不能用 path。

<!-- 正确的写法 -->
<router-link :to="{ name: 'UserProfile', params: { id: 123 }}">查看用户123的主页
</router-link><!-- 错误的写法：当 path 和 params 一起使用时，params 会被忽略！ -->
<!-- <router-link :to="{ path: '/user', params: { id: 123 }}">这种写法不会生效，URL会变成 /user，而不是 /user/123
</router-link> -->

点击后，URL 地址栏会显示：http://localhost:8080/user/123

3. 在目标组件中获取参数 (UserProfile.vue)

<template><div><h1>用户个人主页</h1><p>正在查看的用户ID是：{{ userId }}</p></div>
</template><script>
export default {computed: {userId() {// 通过 this.$route.params.id 获取参数return this.$route.params.id;}},created() {console.log('从路由参数中获取的用户ID:', this.$route.params.id);}
}
</script>

`query` 的使用场景与示例

query 主要用于传递可选参数，比如筛选、排序、分页等信息。

使用场景：

商品列表页，按价格排序并显示第二页 -> /products?sort=price&page=2
搜索结果页，搜索关键字为 “vue” -> /search?q=vue
从一个营销邮件链接点击过来，需要追踪来源 -> /register?source=email_campaign

示例代码：

1. 配置路由 (router/index.js)
不需要为 query 参数做任何特殊配置。

const routes = [{path: '/search',name: 'SearchPage',component: () => import('../views/SearchPage.vue')}
]

2. 创建链接 (<router-link>)
使用 path 或 name 都可以。

<!-- 使用 path -->
<router-link :to="{ path: '/search', query: { keyword: 'vue3', filter: 'official' }}">搜索Vue3官方文档
</router-link><!-- 使用 name，效果相同 -->
<router-link :to="{ name: 'SearchPage', query: { keyword: 'vue3', filter: 'official' }}">搜索Vue3官方文档
</router-link>

点击后，URL 地址栏会显示：http://localhost:8080/search?keyword=vue3&filter=official

3. 在目标组件中获取参数 (SearchPage.vue)

<template><div><h1>搜索结果</h1><p>搜索关键词是：{{ searchQuery.keyword }}</p><p>筛选条件是：{{ searchQuery.filter }}</p></div>
</template><script>
export default {computed: {searchQuery() {// 通过 this.$route.query 获取整个查询对象return this.$route.query;}},created() {console.log('从查询参数中获取的关键词:', this.$route.query.keyword);console.log('从查询参数中获取的筛选条件:', this.$route.query.filter);}
}
</script>

总结与专家建议

何时使用 params？
- 当传递的参数是必需的、构成 URL 核心语义的一部分时。
- 例如，没有用户 ID 就无法显示用户页面。
何时使用 query？
- 当传递的参数是可选的、用于过滤、排序或分页时。
- 例如，商品列表页可以不带任何排序或分页参数，只显示默认状态。
关键陷阱提醒：
- params 必须与 name 配合使用，这是新手最容易犯的错误。
- params 和 query 可以一起使用，它们并不互斥。