解决A页传到B页数据，在B页刷新后数据丢失问题

王拾羽

于 2020-05-18 16:25:25 发布

阅读量590

点赞数

分类专栏：路由传参 vant、element组件库文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/bruno_mars_brother/article/details/106189474

版权

vant、element组件库同时被 2 个专栏收录

4 篇文章

订阅专栏

路由传参

1 篇文章

订阅专栏

本文介绍了一种解决列表页传到详情页数据在刷新后丢失的问题，通过在详情页的created()生命周期函数中调用专门函数来获取并保存前一页传来的数据，确保即使在用户刷新页面的情况下，数据也不会丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决列表页传到详情页数据，在详情页刷新后丢失问题

列表页面数据传参

handleOpt(index, row) {
      this.$router.push({
        name: "WorkDetail",
        params: {
          wid: row.wid
        }
      });
    }

详情页面接受参数

为了让created(){}生命周期函数内部数据整洁，我们将获取前一页传过来的数据定义到一个函数内部，并将这个函数在created函数内部调用；

created(){
  this.getInfo ();
},
methods:{
  getInfo (){
     //第一步
     const wid = this.$route.params.wid || sessionStorage.getItem("detail_wid"); 
     //第二步
     this.wid = wid;
     //第三步
     sessionStorage.setItem("detail_wid", wid);
  }
}

解析：在平时项目开发过程中，数据的传输只是在A页面使用路由传参，如果在B页面只做了接收参数的处理，就是出现用户刷新B页面后，从A页面传递的数据丢失问题；所以第一步我们获取传递来的静态数据方式有两种，要么从路由的params中获取，要么从sessionStorage中获取；第二步将数据赋值给data中的某个值供该页全局使用；第三步将数据存到sessionStorage中；
原理：当页面已加载的时候便从路由中获取到了数据，往下走流程将其存储下来，用户不挂怎么刷新数据都不会丢失。