vue-router中params和query的区别

最新推荐文章于 2024-04-17 09:13:31 发布

岛为什么会飞

最新推荐文章于 2024-04-17 09:13:31 发布

阅读量996

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bantoumingasong/article/details/127648521

版权

query和params是vue router中两个传参的方式，整体上很像，在一些细节上有一定的区别，需要注意一下

先行提示：
两者的获取参数的方式都是采用this.$route
具体为this.$route.query，this.$route.params

1.引入参数借助name还是path？

query参数可以使用name也可以使用path，都可以正常传参
params只能用name，用path的话传不过去，用$route接收不到

2.参数显示在url上？

query传参，参数暴露在url上，拼接在路径后面/index?a=1&b=2

params传参

如果在路由上配置了某参数且传了该参数，url上就会显示
如果没配置，传多少都不会显示
如果配置了，但是没传也不会显示，而且还会报错

3.刷新参数是否会丢失

params传参，刷新会丢失，但如果在路由配置了，可以在url显示的参数，刷新不会丢失
query传参，刷新不会丢失，注意用query就不要路由配置参数了，会报错

4.参数必须提前配置？

query是不需要提前配置的，该问题主要针对params

params配不配置看需求

无论配不配，跳转后都能用this.$route.params获取到参数
配不配带来的影响就是参数是否会显示在url中

这几个区别是我在代码中试出来的，如果有缺失还请补充，如果有问题还请指正

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

岛为什么会飞

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中params和query的区别，以及具体用法

weixin_42282727的博客

07-22

1万+

query传递参数会在url后面用？连接起来，且参数之间用&&符号连接然后显示在页面的url中；params传递参数不会显示在页面中；query有点像ajax中的get请求，而params像post请求。在vue中使用query要搭配path路径，而params只能由命名路由name来引入；看下列代码：路由中path的配置 { path: '/argu/:name/:id', //这种路由配置是params传递参数,且这个后面必须加参数，如果不加，刷新页面这些参数会消失 ..

vue-router中params和query的细节

peade的博客

03-26

1828

path 和params 同时使用，会忽略 params this.$router.push({path:'/book', params:{id:'123213'}}) // 这实际上与下面相同 this.$router.push({path:'/book'}) // 实际访问路径为 /book path和query可以同时使用 this.$router.push({path:'/book',...

参与评论您还未登录，请先登录后发表或查看评论

Vue路由query 和 params 传参的区别

陈新科的博客

10-20

1339

通过 url 传递参数控制页面显示数据的两种方式 1. query 传统问号传参 url 格式：xxx.com/product?id=123 模板内获取数据：this.$route.query.id 2. params 动态路由匹配 url 格式：xxx.com/product/123 模板内获取数据：this.$route.params.id 注意这个方式参数字段名 id 要在路由配置中定义用冒号的形式标记参数可以继续拼接 /student/:id/:name/:age/:address

vue路由传值params和query的区别

weixin_33938733的博客

02-14

365

vue路由传值params和query的区别 > 1.query传参和接收参数 > 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) > 接收参数: this.$route.query.id > 注意:传参是this.$ro...

Vue Router 的query和params的区别？

m0_52644825的博客

10-16

1514

区别一：区别一：（1）query相当于get请求，页面跳转的时候可以在地址栏看到请求参数（2）params相当于post请求，参数不会在地址栏中显示区别二：（1）query 刷新不会query里面的数据（2）params刷新会丢失params里面的数据。

vue路由传参中query方式与params方式的区别

oLylia的博客

09-02

707

vue路由传参中query方式与params方式的区别

vue路由传参query和params的区别？

青山不改，绿水长流。

09-20

1343

1.query使用path和name传参跳转都可以，而params只能使用name传参跳转。2.params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。3.query相当于get请求，而params相当于post请求query传过来的参数会显示到地址栏中而params传过来的参数不会显示到地址栏中 4.接受参数的时候用this.$route.params.name或者this.$route.query.name

浅析vue-router中params和query的区别

10-15

在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...

vue router使用query和params传参的使用和区别

08-28

本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue-router params与query使用及区别

黑山老妖的小站

08-15

1207

前置知识 url的语法大多数的url都是由9个部分组成 <scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag> scheme方案名称即协议名称,表示用哪种协议访问服务器，如http、https user用户：某些方案访问资源时需要的用户名，有些服务器要求输入用户名密码才会允许用户访问数据，如ftp pass

vue中params和query的区别

最新发布

Miller777_的博客

04-17

425

query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是。

vue路由传参--------params和query的区别

qq_34507902的博客

08-08

5603

vue路由传参--------params和query的区别背景：项目中需要跨页面传值，如试题id,遇到了刷新后，传的值消失，所以研究了以下两者的区别 1.params只能用name来引入路由，query用path/name来引入 2.params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对...

vue-router中query与params区别

weixin_43550562的博客

08-17

454

query和params两者都是在Vue路由中传参用法： query用path来引入，params只能用name来传递，不能使用path 1.query方式传参和接收参数 //传参 this.$router.push({ path:'/xxx' query:{ id:id } }) //接收参数 this.$route.query.id 传参是this.router，接收参数是this.router，接收参数是this.router

vue路由传参query和params的区别（详解！）

ii窝窝头的博客

05-13

2091

1.query使用path和name传参跳转都可以，而params只能使用name传参跳转。 query传参：　　页面带参数跳转：this.$router.push({ path:'/city',name:'City', query: { cityid: this.Cityid,cityname:this.Cityname }}) 路由配置：{path:'/city',name:'City',component:City}, 接收参数：this.cityid = this.$route.quer

vue中路由的param和query的区别

An滴饭儿的博客

04-23

2038

前几天面试中被面试官问到这个问题，当时支支吾吾的说不出来，后来自己实际操作了一下，才明白这两者使用上的区别。 1.使用params传参注意，一定要用name来引入路由跳转地址，否则跳转不过去使用params传递参数的时候，router----index.js中路由的配置一定要在后面加传递过去的参数，有几个加几个在浏览器中地址栏的样子获取参数 2.使用query跳转页面传递参数...

vue中路由传参query和params的区别

qq_43153895的博客

11-27

380

1.query传参，使用query传参，在定义路由的时候可以不配置参数名称，路由跳转时既可以用path引入也可以用name引入。 query里的参数会和参数的值拼接在地址栏，跟ajax的get方法类似，传参可以在地址栏直接看到，安全性不高，接收参数 this.$route.query.参数定义路由 js路由跳转地址栏 2.1params传参，在网上看了很多params传参的帖子，说的...

Vue路由传参的两种方式，params和query方式的区别

yzkdcsdn的博客

11-10

1140

1、用法上的区别：query可以用name也可以用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$router.query.name和this.$router.params.name 2、url展示上：params类似于post，query更加类似于我们ajax中学的get传参，说得简单一点，用params传参在浏览器地址栏中不显示参数，用query传参的话浏览器地址栏中会显示参数，所以用params传值相对安全 ...

vue中query与params的区别？

weixin_33834075的博客

04-25

153

params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。转载于:https://www.cnblogs.com/duanzhange/p/8944653.html...

vue-router两种传参方式query和params区别

CY_WINT的博客

10-13

212

【代码】vue-router两种传参方式query和params区别。

vue-router 中 query和params

03-16

vue-router 中的 query 和 params 都是用来传递参数的。 query 是通过 URL 中的查询字符串传递参数的，例如： ``` http://example.com/path?foo=bar&baz=qux ``` 在这个 URL 中，query 参数是 `foo=bar` 和 `baz=qux`。在 vue-router 中，可以通过 `$route.query` 来获取当前路由的 query 参数，例如： ```javascript // 当前路由为 /path?foo=bar&baz=qux console.log(this.$route.query.foo) // 输出：bar console.log(this.$route.query.baz) // 输出：qux ``` params 则是通过 URL 中的路径参数传递参数的，例如： ``` http://example.com/path/:id ``` 在这个 URL 中，`:id` 就是一个路径参数，可以通过不同的值来传递不同的参数。在 vue-router 中，可以通过 `$route.params` 来获取当前路由的 params 参数，例如： ```javascript // 当前路由为 /path/123 console.log(this.$route.params.id) // 输出：123 ``` 需要注意的是，params 参数只能在定义路由时指定，而且必须以冒号开头，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/path/:id', component: MyComponent } ] }) ```