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

 

vue3 axios 内跳转页面 vue实现a页面跳转到b页面_点击事件

效果要求:

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

效果实现:

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

vue3 axios 内跳转页面 vue实现a页面跳转到b页面_数据请求_02

self.$route.query.id 表示,并通过后台数据接口访问该行所有数据,代码截图如下:

vue3 axios 内跳转页面 vue实现a页面跳转到b页面_vue3 axios 内跳转页面_03

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

vue3 axios 内跳转页面 vue实现a页面跳转到b页面_vue3 axios 内跳转页面_04

问题分析:

        在完成这个效果的时候,没有及时和后台沟通清楚,所以,刚开始我一直在想办法得到A页面的当前点击行的数据,并用vuex或localstorage两种储存数据的方法在B页面调用,发现两个问题:1.用vue储存的数据可以成功引入B页面,当浏览器刷新时,数据就丢失了,没有继续去深究(听说可以用缓存解决这个问题,哈哈~);2.用localstorage本地存储时,数据存在浏览器中,可以成功被B页面调用,刷新页面数据也还在,但是这样数据的安全系数不是很高,稍微懂点代码的用户可以直接在浏览器更改数据,所以这个方法直接不考虑啦~ 最后,跟后台交流的时候,发现他其实有那个列表详情的接口,还是用axios数据请求比较稳,折腾了两三个小时,终于可以啦~所以啊!遇到问题尝试用多种方法是好事,但是少不了与人的交流沟通,不然自己踩的坑就要自己爬出来,过程比较苦p,结果说不定也能终生难忘~哈哈~加油~

 

看到这里,还是忍不住啰嗦几句,不喜勿喷~(也希望能帮助大家,共勉~)