vue路由传参分为两种情况:
一、query和params传参的区别:
1、query传参显示参数,params传参不显示参数,params相对于query来说较安全一点。
2、取值方法也有不同:query取值:this.$route.query.XXX || this.$route.params.xxx
3、query传值页面刷新数据还在,而params传值页面数据消失。
二、各自写法:
query
组件写法(help.vue):
方式一:
![](https://img.haomeiwen.com/i16517485/a6a7d5d576cb7347.png)
方式二:
![](https://img.haomeiwen.com/i16517485/dacd3ad15d2188ad.png)
接受写法(home.vue)
![](https://img.haomeiwen.com/i16517485/a468255e21f0edee.png)
页面渲染(home.vue):
![](https://img.haomeiwen.com/i16517485/2e260563ea065258.png)
query参数赋值到data:
![](https://img.haomeiwen.com/i16517485/1645e412ee38ae57.png)
params:
组件写法(about.vue):
![](https://img.haomeiwen.com/i16517485/93157edfcd68f946.png)
方式二:
![](https://img.haomeiwen.com/i16517485/e6e56acc43de00fb.png)
路由写法:
![](https://img.haomeiwen.com/i16517485/aae33afc1362db66.png)
接受写法:
![](https://img.haomeiwen.com/i16517485/37e911b7df1ce7e0.png)
页面渲染:
![](https://img.haomeiwen.com/i16517485/9c5e4221c526b268.png)
网友评论