vue-router的query和params的区别（附实际用法）

一. 先上总结

• query 适用于：搜索、筛选、分页等场景，参数可选，URL 结构清晰。

如果参数是可选的、影响页面筛选 ，用 query。

• params 适用于：详情页、动态路由匹配，参数是 URL 的一部分，必须在路由中定义。

如果参数是必须的、用于唯一标识资源 ，用 params。

二. query 和 params 的区别

在 Vue Router 中，query 和 params 都可以用于传递参数，但它们的使用方式和适用场景有所不同。

对比项	query	params
URL 形式	/tips?id=123&name=税务指南	/tips/123
获取方式	route.query.id	route.params.id
是否必须在路由配置中定义	不需要，可以随时传递	需要 ，必须在 router.js 里定义动态参数
是否可选	可选，可以不传	通常是必填 ，除非在路由中使用 :id? 使其可选
是否支持对象传递	支持，可以传递复杂对象（但需要编码）	不支持，只能传递字符串
是否会影响浏览器刷新	不会丢失，因为参数在 URL 中	不会丢失，但必须匹配路由规则
适用场景	适用于筛选条件、搜索参数、分页等	适用于详情页、动态路由匹配等

---

三. 适用场景

1. 适合使用 query 的情况

• 搜索、筛选、分页等场景
• 参数可选，不影响路由匹配
• 可以直接复制 URL 进行分享

示例：

router.push({ path: '/tips', query: { page: 2, sort: 'desc' } });

URL 结果：

/tips?page=2&sort=desc

2. 适合使用 params 的情况

• 详情页、动态路由匹配
• 参数是路由的一部分
• 参数必须存在，否则路由不匹配

示例：

router.push({ name: 'tips', params: { id: 123 } });

URL 结果：

/tips/123

四. query和params的具体用法示例

在 Vue 3 中使用 Vue Router 进行页面跳转和传递参数的方法如下：

1. 如何跳转到 /tips 页面？

可以使用 this.$router.push 或 useRouter 进行跳转：

import { useRouter } from 'vue-router';
const router = useRouter();
router.push('/tips');

或者在模板中使用：

<router-link to="/tips">跳转</router-link>

---

2. 如何跳转并携带参数？

Vue Router 支持 query 参数 和 params 参数 传递数据。

方式 1：使用 query 传参

router.push({ path: '/tips', query: { id: 123, name: '税务指南' } });

URL 结果：/tips?id=123&name=税务指南

方式 2：使用 params 传参

router.push({ name: 'tips', params: { id: 123 } });

⚠️ 注意 ：使用 params 传参时，路由必须配置 :id 这样的动态参数，否则不会生效。

{
    path: '/tips/:id?',
    name: 'tips',
    component: () => import('@/pages/tips.vue'),
}

/:id? 代表 id 参数是可选的。

---

3. 如何在 /tips 页面获取参数？

在 tips.vue 组件中，可以使用 useRoute 获取参数：

import { useRoute } from 'vue-router';
const route = useRoute();
// 获取 query 参数
console.log(route.query.id, route.query.name);
// 获取 params 参数
console.log(route.params.id);