vue之this.$route.params和this.$route.query的区别

1.this.$route.query的使用

A、传参数：

this.$router.push({

         path: '/monitor',

         query:{

               id:id,

          }

}）

B、获取参数：

this.$route.query.id

C、在url中形式（url中带参数）

http://172.19.186.224:8080/#/monitor?id=1

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

自己曾遇到过的问题：

E、还有一种传递参数为object的情况，虽然对象也可以直接传，但是在刷新页面后数据就不存在了。

解决的办法是将object转为JSON数据，即JSON.stringify()和JSON.parse()

跳转 this.$router.push({ path:'/xx/xxx', query{ obj:JSON.stringify(object) }})       

接收 this.obj = JSON.parse(this.$route.query.obj)

 

2.this.$route.params的使用

A、传参数：

this.$router.push({

         name: 'monitor',

         params:{

               id:id,

          }

}）

B、获取参数：

this.$route.params.id

C、在url中形式（url中不带参数）

http://172.19.186.224:8080/#/monitor

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