router-LInk传参与接受参数(记录)

问题,点击下方router-link后转到另一个组件上,并携带点击的信息的id
在这里插入图片描述

 	<div v-for="(item,index) in hotMessage">
          <img src="image/mainPage/listTitle.png">
          <router-link :to="{path:'hotMessage', query: {index:item.id}}">{{item.name}}</router-link>
          <span>{{item.date}}</span>
    </div>

to后其实跟的是一个对象
(注意:这里是:to,不是to,需要接收v-for的值,如果你也要接收值,不要忘记加冒号)

:to="{path:‘hotMessage’, query: {index:item.id}}"

  1. path属性,表示需要转到的组件名称,如果原来是 to=“/map” 则改成 to="{path:‘map’}"效果相同
  2. query属性,如果需要传参数,则加一个,他是一个对象,query: {键:值,键:值},这里传的是
    index:item.id

接受方
在这里插入图片描述
this.$route.query.属性名称 就可以取到值,(记住是route不是router)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值