vue路由传参query和params的区别(详解!)


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. query. cityid;

params传参:

  页面带参数跳转: this. $router. push({ name: 'City', params: { cityid: this. Cityid, cityname: this. Cityname }})
 
  路由配置:{ path: '/city/:cityid/:cityname', name: 'City', component:City},
 
  接收参数: this. cityid = this. $route. params. cityid;

2.传参跳转页面时,query不需要再路由上配参数就能在新的页面获取到参数,params也可以不用配,但是params不在路由配参数的话,当用户刷新当前页面的时候,参数就会消失。

  也就是说使用params不在路由配参数跳转,只有第一次进入页面参数有效,刷新页面参数就会消失。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM