vue-router的query和params的区别(附实际用法)

一. 先上总结

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

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

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

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

二. query 和 params 的区别

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

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

三. 适用场景

1. 适合使用 query 的情况

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

示例:

javascript 复制代码
router.push({ path: '/tips', query: { page: 2, sort: 'desc' } });

URL 结果:

bash 复制代码
/tips?page=2&sort=desc

2. 适合使用 params 的情况

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

示例:

javascript 复制代码
router.push({ name: 'tips', params: { id: 123 } });

URL 结果:

bash 复制代码
/tips/123

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

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

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

可以使用 this.$router.pushuseRouter 进行跳转:

javascript 复制代码
import { useRouter } from 'vue-router';
const router = useRouter();
router.push('/tips');

或者在模板中使用:

html 复制代码
<router-link to="/tips">跳转</router-link>

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

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

方式 1:使用 query 传参
javascript 复制代码
router.push({ path: '/tips', query: { id: 123, name: '税务指南' } });

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

方式 2:使用 params 传参
javascript 复制代码
router.push({ name: 'tips', params: { id: 123 } });

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

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

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


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

tips.vue 组件中,可以使用 useRoute 获取参数:

javascript 复制代码
import { useRoute } from 'vue-router';
const route = useRoute();
// 获取 query 参数
console.log(route.query.id, route.query.name);
// 获取 params 参数
console.log(route.params.id);
相关推荐
进取星辰3 分钟前
22、城堡防御工事——React 19 错误边界与监控
开发语言·前端·javascript
MaCa .BaKa13 分钟前
37-智慧医疗服务平台(在线接诊/问诊)
java·vue.js·spring boot·tomcat·vue·maven
ドロロ8061 小时前
element-plus点击重置表单,却没有进行重置操作
javascript·vue.js·elementui
海盐泡泡龟1 小时前
ES6新增Set、Map两种数据结构、WeakMap、WeakSet举例说明详细。(含DeepSeek讲解)
前端·数据结构·es6
t_hj2 小时前
Ajax案例
前端·javascript·ajax
bigHead-3 小时前
9. 从《蜀道难》学CSS基础:三种选择器的实战解析
前端·css
阿里小阿希3 小时前
解决 pnpm dev 运行报错的坎坷历程
前端·node.js
未脱发程序员3 小时前
分享一款开源的图片去重软件 ImageContrastTools,基于Electron和hash算法
前端·javascript·electron
geovindu4 小时前
vue3: pdf.js 2.16.105 using typescript
javascript·vue.js·typescript·pdf
视频砖家4 小时前
Web前端VSCode如何解决打开html页面中文乱码的问题(方法2)
前端·vscode·vscode乱码·vscode中文乱码·vscode中文编码