vue 项目----从A页面跳转到B页面(路由跳转,用query传递id值给另一个组件)

项目效果:(吼吼~感觉蛮简单的一个效果,却摸索了两三个小时,厉害啦~)

 

vue 项目----从A页面跳转到B页面(路由跳转,用query传递id值给另一个组件)

 

效果要求:

        通过点击A页面列表中的查看,访问B页面的列表详情

 

效果实现:

        首先,我给A页面列表中的查看按钮添加点击事件,由于是用iview框架做的table,所以必须要清楚如何给查看按钮添加点击事件,请看截图:

vue 项目----从A页面跳转到B页面(路由跳转,用query传递id值给另一个组件)

        在B页面接收从A页面传递过来的当前行的id值,用 self.$route.query.id 表示,并通过后台数据接口访问该行所有数据,代码截图如下:

vue 项目----从A页面跳转到B页面(路由跳转,用query传递id值给另一个组件)

        最后将拿到的后台数据渲染到B页面上,请看截图:

vue 项目----从A页面跳转到B页面(路由跳转,用query传递id值给另一个组件)

未完。。。