背景:项目中从列表页跳转到详情页返回的时候会默认跳转到分页的第一页,不利于用户的体验,所以需要返回到当前页

实现方法:
方法一:Vue2提供了组件级路由钩子函数,分别是beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave这三个钩子函数
在这里使用的是beforeRouteEnter,代码如下:

  beforeRouteEnter(to,from,next){
    next((vm)=>{ //参数vm就是当前组件的实例。
    console.log(vm)
      if(from.fullPath=='/other'){
        vm.currentPage=store.state.message.currentPage
         vm.search()
      }
    })
  },

这个方式可以实现,但是会调用2次接口请求,不符合我的预期
注意:在使用beforeRouteEnter钩子函数的时候无法使用this,因为当钩子执行前,组件实例还没被创建,如果想调用组件中定义的参数及方法,需要传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

方法二:使用SessionStroage
1.在列表页mounted生命周期进行page初始化

    mounted(){
      if(sessionStorage.getItem('msgInfo')){
    
        //如果有就读取缓存里面的数据
        this.currentPage = Number(sessionStorage.getItem("currentPage"));
      }else{
        this.currentPage=1;
        //这个主要是从其他页面第一次进入列表页,清掉缓存里面的数据
        sessionStorage.removeItem("currentPage");
      }
    },

2.在页面跳转地方存储值

sessionStorage.setItem('currentPage', this.currentPage);

3.销毁组件时清除缓存

destroyed(){
       sessionStorage.removeItem("msgInfo");
    },

4.在详情页存储

 sessionStorage.setItem("msgInfo",true)

这个方式是达到了我的预期

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐