vue路由传参params和query的用法和区别

1.Params

//带过去id

通过this.$router.push({name:routename，parmas:{id:id}});

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

及通过路由配置的name属性访问

在路由配置文件中定义参数：

2.Query

页面通过path和query传递参数，该实例中row为某行表格数据

923150805877.png

在目标页面通过this.$route.query获取参数：

<colgroup><col style="width: 424px;"><col style="width: 424px;"></colgroup>

this.$route.query.row。xxx

区别：

1、用法：

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router

2、展示上

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示