Vue项目开发中遇到的一个小问题

项目中遇到的小问题

一个列表页,点击最右边详情页,弹出一个弹出框,弹出框中又有一个列表页,点击这个弹出框中最右边的查看,进入一个新的界面,查看完之后返回就会回退到上一个路由,但是弹出框会自动关闭,为了提高用户体验,想要查看具体点击了弹出框列表中的哪一项数据,所以要求回退之后,弹出框显示出来,便于查看,应该如何实现???

针对以上这个优化的小需求,我在实际的项目中尝试了几种解决办法
  • 用路由传参 将控制弹出框显示的变量 当界面返回的时候,给这个值默认返回true ,是可以实现返回的时候 弹出框显示,但是 由于查看详情的时候 会调用好几个接口,导致该界面中没有任何数据
  • 第二种我想到的 两个是非父子组件,可以利用非父子组件之间的传值问题,可以利用eventBus,或者vuex,看了之后感觉不是很方便
  • 第三种解决办法 我是想到 把跳转到新界面,修改为组件的形式进行传值,但是界面已开发完成,工作量较大
  • 最后一个办法,是请教我司的大神同事,我会将界面跳转的时候将控制弹出框显示的变量,存储到sessioStroage中,当返回的时候,在mounted 中取到sessionStroage的变量值,也可以将详情中的数据也存储到sessionStroage中,这样比较简单 ,基本满足了我的需求;
应该还会有其他办法,有待进一步更新

你可能感兴趣的:(前端,vue.js)