Vue Router 的query和params的区别？

已于 2022-10-16 11:30:25 修改
阅读量1.3k 收藏 6
点赞数 1
文章标签： 前端
于 2022-10-16 11:27:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52644825/article/details/127345322
版权

区别一：

（1）query相当于get请求，页面跳转的时候可以在地址栏看到请求参数

（2）params相当于post请求，参数不会在地址栏中显示

区别二：

（1）query 刷新不会query里面的数据

（2）params刷新会丢失params里面的数据

区别三：

1.query：方式传参和接受参数

（1）传递数据较多时，用query, 因为query传入的是一个对象

2.params：方式传参和接受参数

（1）传一个值时，用params

（2）params传参push里面只能是name: 'xxx', params只能用name来引入路由，如果换成path，接受参数页面会是undefined

列如：首页面的商品列表页加入商品详情页，可以使用这种方式

嘉琪001
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析vue-router中params和query的区别
10-15
在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。感兴趣的朋友跟随脚本之家小编一起看看吧
vue-router中params和query的区别
bantoumingasong的博客
11-15 908
query和params是vue router中两个传参的方式，整体上很像，在一些细节上有一定的区别，需要注意一下两者的获取参数的方式都是采用具体为。
Vue Router 的params和query传参的使用和区别（详尽）
weixin_42408447的博客
06-30 3284
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; t
vue使用router路由进行跳转、传值（query、params）以及query与params传值方式的区别
最新发布
weixin_50643050的博客
05-10 622
在vue日常使用中，虽然使用a标签进行跳转并不会报错，但是处于vue规范，还是推荐使用vue中自带的标签进行跳转，
【vue】vue中query和params的区别
小墨鱼的前端问题录
07-17 344
区别：1、query用path编写传参地址，而params用name编写传参地址；2、query刷新页面时参数不会消失，而params刷新页面时参数会消失；3、query传的参数会显示在url地址栏中，而params传参不会显示在地址栏中。
vue-router 传参：query传参、params传参
热门推荐
weixin_49832841的博客
04-17 1万+
简单介绍了 query传参和 params传参这两种方式
vue中 路由传参query和params的区别
qq_43153895的博客
11-27 328
1.query传参，使用query传参，在定义路由的时候可以不配置参数名称， 路由跳转时既可以用path引入也可以用name引入。 query里的参数会和参数的值拼接在地址栏，跟ajax的get方法类似，传参可以在地址栏直接看到，安全性不高， 接收参数 this.$route.query.参数 定义路由 js路由跳转 地址栏 2.1params传参，在网上看了很多params传参的帖子，说的...
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Vue3】路由的query参数和params参数
null18的博客
03-14 2198
路由参数是 Vue 路由系统中非常重要的一部分，通过动态路由参数、查询参数和路由元信息，我们可以实现更灵活的页面导航和数据传递。熟练掌握这些技巧可以帮助我们更好地构建复杂的单页面应用挑战与创造都是很痛苦的，但是很充实。
query 与 params 两种方式传参区别？
lzqxz_的博客
01-17 3433
1.query方式传参 使用path属性给定对应的跳转路径（类似于GET请求），在页面跳转的时候，可以在地址栏看到请求参数，参数会以查询字符串的形式显示在浏览器地址栏中。 2.params方式传参 与query相反，使用params方式则不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路径中或隐藏。即浏览器地址栏中直接显示请求参数的结果。 ...
Vue params 和 query 传参的 区别
rememberyf的博客
11-28 8676
今天我们就来说一下params和query传参的使用和区别，要说这个的话，我们就有必要提一下Vue-router了。 Vue-router它主要分为动态路由（传参匹配的问题），嵌套路由（父子组件之间的通信），编程式路由（this.$router.push(‘绝对路径’)），这三方面的内容都是比较容易的，我们参考官方给出的文档就可以理解的差不多，Vue-router官方文档。 我们今天主要来说比较令...
Vue Router携带并接收query、params参数方式
wytccc的博客
01-17 3346
【方式二：传递一个对象，路径是path属性，拼接的参数是query属性，推荐】【方式一：通过查询字符串直接拼接在路径后面】【直接在$route.query中获取】
Query和params的区别？
G_Z_X的博客
03-14 1万+
今天实现美食杰个人主页的效果用到了query传参的方法 那么接下来我会叙述一下query和params的区别 query语法： this.$router.push({path:"地址",query:{id:"123"}}); 这是传递参数 this.$route.query.id； 这是接受参数 params语法： this.$router.push({name:"地址",params:{id:"123"}}); 这是传递参数 this.$route.params.id; 这是接受参数 通过两者的语
vue路由传参params和query的用法和区别
weixin_45113258的博客
05-27 660
1.Params //带过去id 通过this.$router.push({name:routename，parmas:{id:id}}); 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件...
Vue Router 的params和query传参的使用和区别
qq_26642611的博客
12-25 643
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' ...
vue中query和params的主要区别
HackerZhou的博客
07-15 737
vue中query和params的主要区别
Vue中关于路由传参query和params的区别
TOMORROW-前端
11-09 1123
路由配置：{path:'/login',name:'Login',component:Login}, 1.页面携带query参数跳转(path,name指定跳转到Login时都可以携带query参数) this.$router.push({ path:'/login',name:'Login', query: { id: this.id } ) query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中 2.页面携带params参数跳转(携带params参数跳转时只能使用name指定) this
vue中query与params的区别？
weixin_33834075的博客
04-25 136
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
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 } ] }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值