VueRouter的params和query的区别

本文探讨Vue Router中params与query参数的区别,包括参数在地址栏的显示、页面刷新后的参数保留情况以及路由配置的影响。同时分析了两种参数类型在实际应用中的优劣,帮助开发者选择合适的参数传递方式。

个人理解如有偏差欢迎指正

官方文档是和路由一起写的,我个人验证得到就算路由不进行配置,依旧能在下一个页面获取到param以及query的参数

个人测试如下

在router.js配置路由

{ path: '/submit',name:'submit',component: Submit,meta:routeMeta({title:'确认订单',layoutFooter:false,keepAlive: false})}

可看到并没有如官网说的那样配置

然后我在上个页面写一个点击事件

 this.$router.push({ name: 'submit', params: {ids:1,2,3 }})

然后在submit的mounted中打印

 mounted(){
            console.log(this.$route.params)
        }

发现能接受到参数,此时就纠结那么为什么还要向官网那样配置路由,个人又通过不同的测试认为的原因如下:
如果用户刷新当前这个页面就获取不到param参数,如果像官网说的那样配置路由就会在浏览器地址栏中有参数,刷新当前页面依旧能获取

query是不用配置路由在地址栏上依旧能显示参数,刷新当前页面依旧能获取到参数

两者的区别:

query的参数会在地址栏显示(路由未配置参数情况),刷新当前页面依旧能获取

params路由未配置参数情况,参数不会在地址栏显示,在页面能获取,但如果刷新页面就没了

那么问题来了,用query不就好了也不用配置路由的参数,那还要params干嘛,如果不配置路由,不管携带任何参数都能进入,配置了之后只有携带此参数的才能进入

此外还和路由传参props有关https://router.vuejs.org/zh/guide/essentials/passing-props.html

题外注意点:

<think>好的,我现在需要详细解释Vue Routerqueryparams区别。首先,我得回忆一下Vue Router的基本用法,确保自己理解正确。用户可能对这两个参数的使用场景传参方式有疑问,所以我要分清楚它们的异同点。 首先,query参数。我记得query是通过URL的问号后面的键值对传递的,比如`/path?name=John&age=25`。这种参数应该是可见的,且在页面刷新后仍然存在,因为它们是URL的一部分。它们不需要在路由配置中预先定义,使用起来比较灵活,适合传递多个可选参数。 然后是params参数。这部分参数应该是在定义路由时通过动态路径参数指定的,比如`/user/:id`,然后在跳转时传入具体的值,像`/user/123`。这样,参数会作为路径的一部分,而不是出现在问号后面。不过,需要注意的是,如果用户刷新页面,params参数可能会丢失,除非路由配置正确,或者使用了其他方式保持状态。另外,params参数必须要在路由的path属性中预先定义,否则无法正确传递。 接下来要比较两者的使用场景。例如,当需要传递敏感信息时,可能不适合用query,因为参数暴露在URL中。而params则更适合传递必要且不敏感的参数,比如资源的ID。此外,编程式导航中,使用`router.push`时,params需要用name而不是path来指定路由,否则可能无法传递参数,而query则可以使用path。这一点需要特别注意,因为容易出错。 还需要提到的是,当使用params时,如果用户直接通过URL访问页面,而没有在路由配置中定义相应的参数,可能会导致页面无法正确渲染或参数丢失。而query参数则不存在这个问题,因为它们不依赖路由配置的动态段。 另外,组合使用的情况,可能同时使用paramsquery,比如`/user/123?details=true`,这样既传递了用户ID,又通过query参数控制显示详细信息。这种组合使用可以满足更复杂的需求。 可能还需要提到一些常见的问题注意事项,比如在组件中如何获取这两个参数。通常,在Vue组件中,可以通过`this.$route.query``this.$route.params`来访问它们。例如,在模板中可以直接引用,或者在方法中使用。 最后,总结两者的主要区别:传参方式、URL显示、路由配置需求、刷新后的参数保留情况,以及编程式导航时的注意事项。确保用户能根据不同的需求选择合适的传参方式,避免常见错误。</think>Vue Routerquery params 是两种不同的传参方式,主要区别体现在使用场景传参形式上。以下是逐步对比分析: --- ### 一、**核心区别总结** | 特性 | query | params | |--------------|-------------------------------------|----------------------------------| | **传参位置** | URL 的 `?` 后拼接(键值对形式) | URL 的路径中(需预定义动态参数) | | **可见性** | 明文显示在地址栏 | 路径中隐藏(但路径本身可见) | | **路由配置** | 无需预先定义 | 必须定义动态参数(如 `:id`) | | **刷新保留** | 参数保留 | 参数丢失(需配合其他方式保持) | | **适用场景** | 过滤条件、分页等可选参数 | 资源ID等必要参数 | --- ### 二、**具体使用方式** #### 1. **query 参数** - **传参方式**:通过 URL 的 `?` 后拼接键值对 示例 URL:`/user?name=John&age=20` - **路由跳转**: ```javascript // 编程式导航 router.push({ path: '/user', query: { name: 'John', age: 20 } }) // 声明式导航(模板中) <router-link :to="{ path: '/user', query: { name: 'John', age: 20 } }">跳转</router-link> ``` - **获取参数**: ```javascript this.$route.query.name // "John" this.$route.query.age // "20" ``` #### 2. **params 参数** - **传参方式**:通过路径中的动态参数传递 示例 URL:`/user/123`(假设路由配置为 `/user/:id`) - **路由配置**(必须预先定义动态参数): ```javascript { path: '/user/:id', component: User } ``` - **路由跳转**(必须使用 `name`,不能用 `path`): ```javascript // 编程式导航 router.push({ name: 'User', params: { id: 123 } }) // 声明式导航(模板中) <router-link :to="{ name: 'User', params: { id: 123 } }">跳转</router-link> ``` - **获取参数**: ```javascript this.$route.params.id // "123" ``` --- ### 三、**关键注意事项** 1. **params 必须定义动态路由** 若未在路由配置中声明 `:id`,传递的 `params` 会被忽略。 2. **params 刷新后丢失问题** 直接访问带 params 的 URL(如 `/user/123`)可以保留参数,但通过页面内跳转后刷新页面会导致参数丢失。 **解决方案**:搭配 `localStorage` 或 `Vuex` 持久化数据。 3. **query 更适合 SEO** 明文参数便于搜索引擎抓取过滤条件。 --- ### 四、**组合使用示例** ```javascript // 跳转 URL 结果:/user/123?from=home router.push({ name: 'User', params: { id: 123 }, query: { from: 'home' } }) ``` --- ### 五、**总结选择建议** - 使用 **params**:传递必要且不敏感的参数(如资源ID)。 - 使用 **query**:传递可选参数(如搜索条件、分页),或需要URL可分享的场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值