• 售前

  • 售后

热门帖子
入门百科

Vue项目中实现带参跳转功能

[复制链接]
陈嘉凯 显示全部楼层 发表于 2021-10-26 13:12:31 |阅读模式 打印 上一主题 下一主题
页面介绍:

​ 主页面:name —> shishengzuotanhuichaxun

​ 此页面表格中的数据均通过接口从后端获取数组对象并渲染,每一行数据都有对应的行id,我们的目标就是根据表格中每行数据的行id不同进而跳转至对应的子详情页面
子页面(详情页面):name —> Cinfo

​ 此页面为拿到行id后通过调用相应接口所要渲染的页面
项目简介及利用带参跳转的缘故原由:


本体系利用Vue举行项目框架搭建,利用Vant移动端框架的组件库举行开发。主页面中的表格利用了纯原生html的th、tr、td实现,向表格渲染数据利用了vue指令v-for对tr举行遍历,以是渲染后的表格数据所对应的全部详情按钮是同一个,点击跳转后的页面也是同一个,这就违反了项目业务需求。以是带参传递的实现就尤为关键,带参传递利用的原理是利用了同一模板(Cinfo),但由于url路径不同,各个子页面中内容可以互不影响。
实现过程:

​ step1:


在vue-router下的js文件中,将子详情页面的路由修改为:

​在path属性中加入'/:id‘,并新加name属性,目标是实现在跳转时将url后添加id,从而进入不同的子详情页面
​ step2:


在主页面中为详情按钮的绑定变乱中加入参数,将v-for中item,即通过接口拿到的数组对象作为点击变乱方法中的形参。

注意:
1.@click=detail(item), 为按钮绑定单击变乱时item肯定不要忘记在括号中加上item参数!
2.此处push()方法中path的key值利用了ES6语法–>模板字符串 (允许嵌入表达式的字符串字面量)
此时已经实现了点击详情按钮后将行id作为参数传递到了子详情页面中,如下图:

​ step3:


下面我们就需要在子详情页面中拿到主页面传递过来的id,作为哀求参数调用接口并渲染数据。
​ 实现获取传递过来的id利用为:

​ 固定写法,别问,问就是不会(告急大佬们解答!)。。。
至此,我们已经实现了带参跳转功能的大部分利用,剩下在子页面中通过id调用接口并渲染数据就不展示了
总结:


方法有许多,此方法目前只能实现带具体某个参数举行跳转,并不能传递整个数组大概对象。如果大家有更好的方法可以分享一下。带参跳转的团体实现步骤并不难,重要是思路。此分享由于本人自身实力的不足,大概不是那么的准确和详细。全部步骤中如果有描述错误、不恰当大概含糊不清的地方,麻烦各位大佬肯定指出我的错误~万分感谢!大家共同积极,一起进步!
到此这篇关于Vue项目中实现带参跳转功能的文章就介绍到这了,更多相干vue带参跳转内容请搜刮草根技术分享从前的文章或继承欣赏下面的相干文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作