vue使用router-link :to=“{path:‘/index‘}“传参以及参数的使用

vue使用router-link传参有两种方式:一种是拼接在url后面传参,另一种是放在url中间传参

第一种:拼接在url后面传参

从A页面跳转到B页面,要带A页面的列表行中的行id
在A页面跳转时带参数:

 <router-link :to="{path:  '/franchiser/stores/salesclerk', query:{aId:id}}" exact  title="店员管理">
              待跳转页面
 </router-link>

如果aId=10,那这里的跳转链接就是:/franchiser/stores/salesclerk/list?aId=10

在B页面获取参数:
先在date里面定义一下参数来接收:

data() {
     return {
       filters: {
         id:''  //这里名字根据实际情况定义
       }
 }

filters在我目前的项目里会在调用接口的时候一块传给接口,这里的目的主要就是要有一个能传值给接口的list接收,方便把id传过去。然后以下代码获取到传过来的id

    this.filters.id=this.$route.query.aId  //这里this.$query后面的参数名必须与上个页面传来的参数名保持一致
第二种:将参数放在url中间传参

在主页面要跳转到子页面的地方,path后面像如下格式写入参数,这里的参数没有参数名。
(我这里的路径是需要配置router权限的,不然在url中间带参数会报404,这里的router权限配置要看自己实际的项目里是如何配的,有的是项目后台配,有的是前端在router里面配,看实际情况。)

 <router-link :to="{path:  '/supply/information/' +aId + '/edit' }" exact  title="编辑">
               编辑
    </router-link>

如果aId=12,那么现在的path就是 /supply/information/12/edit
在子页面,我们只需要通过this.$route.params.id获取这个参数就可以使用了。
注意:这里都是this.$route.params.id,不是this.$route.params.aId

  • 8
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常感谢提供安徽省的地图。你可以使用该地图作为背景,并在上面添加交互元素。以下是一个示例代码,可将提供的地图作为 SVG 背景,并实现点击地市时弹出弹窗的功能: ```html <!DOCTYPE html> <html> <head> <style> /* 半透明悬浮框样式 */ #popup { display: none; position: fixed; width: 300px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.5); z-index: 9999; color: #fff; padding: 20px; } </style> </head> <body> <div style="position: relative;"> <img src="http://www.mcdkf.com/anhui_map.jpg" alt="安徽省地图" width="600" height="400"> <!-- 安徽省地市地图 --> <svg id="anhui" width="600" height="400" style="position: absolute; top: 0; left: 0;"> <path d="M 100 200 L 200 100 L 300 200 L 200 300 Z" fill="#ccc"></path> <!-- 其他地市地图 --> <!-- ... --> </svg> </div> <!-- 弹窗 --> <div id="popup"> <h2>地市名称</h2> <table> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <!-- 可以添加更多行 --> </table> </div> <script> // 获取地市元素 const anhui = document.getElementById('anhui'); // 获取弹窗元素 const popup = document.getElementById('popup'); // 点击地市时弹出弹窗 anhui.addEventListener('click', function() { popup.style.display = 'block'; }); // 点击页面其他地方自动关闭弹窗 window.addEventListener('click', function(event) { if (event.target != popup && event.target != anhui) { popup.style.display = 'none'; } }); </script> </body> </html> ``` 请将提供的地图图片保存到本地,并将图片路径替换为 `<img>` 标签的 `src` 属性中的对应路径。然后,你可以根据需要修改地图的样式和具体内容。当点击地市时,弹窗会显示,并且点击页面其他地方会自动关闭弹窗。弹窗中的列表是一个简单的示例,你可以根据需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值