vue组件之间的跳转方法,vue页面跳转传参的问题

　　最近做了一个手机系统，遇到了父页面需要携带参数跳转到子页面的问题。现在已经解决了。下面分享一下实现过程。有兴趣的朋友来看看吧。

页面介绍：

　　主页：姓名—石生坐探会查迅

　　这个页表中的数据都是通过接口从后端取来并呈现的，每一行数据都有对应的行id。我们的目的是根据表格中每一行数据的不同行id跳转到相应的子详情页。

　　子页面(详细页面):名称—Cinfo

　　这个页面就是获取行id后调用相应接口要渲染的页面。

项目简介及使用带参跳转的原因：

　　该系统使用Vue构建项目框架，使用Vant mobile框架组件库进行开发。主页面中的表格由纯native html中的th、tr和td实现，使用vue指令v-for遍历tr来渲染表格数据。所以渲染出来的表格数据对应的所有细节按钮都是一样的，点击跳转后的页面也是一样的，这违背了项目的业务需求。因此，带参数交付的实现尤为关键。带参数投递的原理是使用同一个模板(Cinfo)，但是由于url路径不同，各个子页面中的内容不能互相影响。

实现过程：

step1：

　　在vue-router下的js文件中，将子详细信息页面的路由修改为：

　　将“/:id”添加到路径属性，并添加新的名称属性。目的是跳转时在url后面加上id，从而进入不同的子详情页。

step2：

　　在主页面中，为details按钮的binding事件添加一个参数，将v-for中的item，即通过接口获取的array对象，作为click事件方法中的参数。

　　注意：

　　1.@click=detail(item)，当点击按钮绑定的事件时，item一定不要忘记在括号中添加item参数！

　　2.这里，push()方法中path的键值使用ES6语法模板字符串(允许嵌入表达式的字符串)

　　此时，已经实现了点击详细信息按钮后，行id作为参数传递到子详细信息页面，如下图所示：

step3：

　　接下来，我们需要在子详细信息页面中获取从主页面传递的id，作为请求参数调用接口并呈现数据。

　　获取传递的id的操作是：

　　固定的写，不要问，就是不要问(求大佬解答！)。

　　至此，我们已经用跳转函数实现了大部分操作，其余的在调用接口和在子页中按id渲染数据时不会显示。

总结：

　　方法有很多。目前这种方法只能用一个特定的参数跳转，不能传递整个数组或对象。如果你有更好的分享方式。用jump整体实现步骤并不难，主要是思路。由于我自身实力不足，这篇分享可能没有那么准确和详细。各步骤如有错误、不恰当或描述模糊之处，请指出我的错误~万分感谢！让我们一起努力，共同进步！

　　这就是本文关于Vue项目中引用跳转功能的实现。关于引用vue跳转的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。