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不在路由配参数跳转,

   只有第一次进入页面参数有效,刷新页面参数就会消失。

this. $router. push({ name: 'City', query: { cityid: this. guessCityid, cityname: this. guessCityname }})

猜你喜欢

转载自www.cnblogs.com/cxxb/p/11119702.html
今日推荐