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

一. 先上总结

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

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

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

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

二. query 和 params 的区别

对比项	query	params
URL 形式	/tips?id=123&name=xiaoming	/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的具体用法示例

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

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

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

或者在模板中使用：

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

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

方式 1：使用 query 传参

router.push({ path: '/tips', query: { id: 123, name: 'xiaoming' } });

URL 结果：/tips?id=123&name=xiaoming

方式 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);