Vue中,this.$router.push传递参数的2种方式

161 阅读1分钟

一、总结

1、query方式,相当于get请求,请求体会暴露在请求栏中;

this.$router.push({path: ’ 路由 ', query: {key: value}})

2、params方式,相当于后端的post请求,会把请求体封装起来,地址栏上看不到参数。

this.$router.push({name: ’ 路由的name ', params: {key: value}})

二、query方式

传参:
this.$router.push({
        path: '/seller-center/invoice-info',
        query: {
          id: row.id,
        },
      })
      
接参:this.$route.query.id

三、params方式

传参:
 this.$router.push({
        name: 'seller-center-invoice-info',
        params: { id: row.id },
      })
      
接参:this.$route.params.id

动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。