核心比喻:寄快递
想象一下您要寄一个快递:
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
。
javascript
const routes = [
{
path: '/user/:id', // :id 就是一个 param
name: 'UserProfile', // 使用 params 时,强烈建议给路由命名
component: () => import('../views/UserProfile.vue')
}
]
2. 创建链接 (<router-link>
) 关键点: 必须使用 name
,不能用 path
。
html
<!-- 正确的写法 -->
<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
)
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
参数做任何特殊配置。
javascript
const routes = [
{
path: '/search',
name: 'SearchPage',
component: () => import('../views/SearchPage.vue')
}
]
2. 创建链接 (<router-link>
) 使用 path
或 name
都可以。
html
<!-- 使用 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
)
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
可以一起使用,它们并不互斥。