首页 > 技术文章 > vue之this.$route.params和this.$route.query的区别

ZJTL 2019-12-11 17:18 原文

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、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在

推荐阅读