nuxt动态路由传参
2020-04-21 本文已影响0人
断水无忧
![](https://img.haomeiwen.com/i14623955/34f4586003429a9a.png)
![](https://img.haomeiwen.com/i14623955/df624b499d262bfd.png)
在this.$router.push中有两种传参方式
1.使用query来存放参数
// 其中的game.id,这就是动态路由的参数,也就是‘_gt’
// query: {name: 'aaaa'},就是要传递的参数
this.$router.push({path: '/goodsList/'+game.id, query: {name: 'aaaa'}})
效果:
这样做你传递的参数就会在地址栏显示出来,但是你如果喜欢使用path,只能使用query来传参
![](https://img.haomeiwen.com/i14623955/23c65448cf1d7c22.png)
如何在跳转的页面取值
![](https://img.haomeiwen.com/i14623955/df3551cff61873ad.png)
![](https://img.haomeiwen.com/i14623955/7c2cea790c75679b.png)
2.使用params来存放参数
this.$router.push({name: 'goodsList-gt', params: {gt: game, name:'aaaa'}})
效果:
使用这种方式,地址栏中不会把参数显示出来
![](https://img.haomeiwen.com/i14623955/5d5d3e3545532224.png)
请注意下图中的红框
![](https://img.haomeiwen.com/i14623955/c065c19841971af4.png)
第一个红框:'goodsList-gt’是根据你的动态路由的路径的来(层级原本使用 /,要变成 -)
我的路径是 goodsList/_gt 所以转化为=> goodsList-gt
同理若是你的路径 game/goodsList/_gt 转化为=> game-goodsList-gt
第二个红框:‘gt’ 是根据你动态路由的名字来定
我的是_gt这里就只要写gt 就好了
如何在跳转的页面取值
![](https://img.haomeiwen.com/i14623955/bec885a73161449d.png)
![](https://img.haomeiwen.com/i14623955/d25541b03cfb075c.png)