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不在路由配参数跳转,只有第一次进入页面参数有效,刷新页面参数就会消失。

 
posted @ 2019-07-02 11:50  一个懒惰的陈xx  阅读(6568)  评论(0编辑  收藏  举报