Vue项目中实现带参跳转功能
页面介绍：
主页面：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带参跳转内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 在很多网站用户先访问一个要登录的页面，但当时没有登录后来登录了，等待用户登录成功之后肯定希望返回到上次访问的页面，下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25
- 这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20