nuxt动态路由传参

我的动态路由目录

你也可以这样

在this.$router.push中有两种传参方式

1.使用query来存放参数

// 其中的game.id,这就是动态路由的参数,也就是‘_gt’
// query: {name: 'aaaa'},就是要传递的参数
this.$router.push({path: '/goodsList/'+game.id, query: {name: 'aaaa'}})

效果:
这样做你传递的参数就会在地址栏显示出来,但是你如果喜欢使用path只能使用query来传参


如何在跳转的页面取值


2.使用params来存放参数

this.$router.push({name: 'goodsList-gt', params: {gt: game, name:'aaaa'}})

效果:
使用这种方式,地址栏中不会把参数显示出来\color{red}{(请注意:使用了params,就不能使用path,只能使用name)}

请注意下图中的红框


第一个红框:'goodsList-gt’是根据你的动态路由的路径的来(层级原本使用 /,要变成 -)
我的路径是 goodsList/_gt 所以转化为=> goodsList-gt
同理若是你的路径 game/goodsList/_gt 转化为=> game-goodsList-gt
第二个红框:‘gt’ 是根据你动态路由的名字来定
我的是_gt这里就只要写gt 就好了

如何在跳转的页面取值


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.css只在当前组件起作用答:在style标签中写入scoped即可 例如: 2.v-if 和 v-show 区...
    小棋子js阅读 533评论 0 0
  • 目录 - 1.vue-router响应 路由参数 的变化 - 2.vue-router如何定义嵌套路由? - 3....
    我跟你蒋阅读 5,662评论 0 14
  • 今天身体觉得很累,跑起来有点担心自己会太强求身体,膝盖啊或者哪里有运动损伤,明天换个局部运动或者瑜伽,不做燃脂了,...
    浩渺宇宙阅读 65评论 0 0
  • 记得几天前,有一个女性朋友向我借3000元,当时,我谎称我没有,就没有借给她。其实,我对那个女孩有好感,还打算第二...
    纲手姐姐阅读 678评论 0 1
  • 劳动是一个中性词。劳动的反义词是休息。 如果劳动光荣,休养也非可耻。 要莫,劳改改为休改吧。
    闲乡阅读 740评论 0 0