Vue之this.$route.query和this.$route.params的使用与区别

一、this.$route.query的使用

1.传参数

this.$router.push({
         path: '/trading',
         query:{
               id:id,
          }
}）

2.获取参数（ query相对应的是path params相对应的是name ）

this.$route.query.id

3.url的表现形式（url中带有参数）

   http://localhost:8090/#/trading?id=1

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在

二、this.$route.params的使用

1.传参数

this.$router.push({
         name: 'trading',
         params:{
               id:id,
          }
}）

2.获取参数

this.$route.params.id

3.url的表现形式（url中不带参数）

　http://localhost:8090/#/trading

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在

彩蛋：this.$route.query的使用方法二

（直接拼接形式）

1.传参：

 2.接收参数：