vue 刷新当前路由内容后,点击手机返回键返回当前路由

最近做的一个公众号项目需要在一个列表页面跳转到详情页上时实现一个效果,详情页面内点击下一人时更新数据,点击手机返回键需要在当前路由显示上一人的数据;点击返回列表页按钮go()而不是路由跳转router.push到列表页。
具体场景描述:
1,上一页是一个列表list,下一个是人员详情detail;
2,点击列表内某条进入详情detail;
3,detail页面底部两个fixed btm0按钮,返回列表页和查看下一人;
4,点击原生返回键返回到上一个人;

实现方法:
list页面点击li需要跳转detail页面时将列表数据存下来,带上query参数,在detail监听query的变化,query发生变化时请求接口。
上代码:

·list·
<div class="content_dv">
  <h4>人员列表</h4>
  <van-tabs v-model="activeTab">
    <van-tab title="列表一">
      <ul>
        <li v-for="(item,index) in list1" :key="index" @click="toDetail(index,1,item,stage)">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </van-tab>
    <van-tab title="列表二">
      <ul>
        <li v-for="(item,index) in list2" :key="index" @click="toDetail(index,0,item,stage)">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </van-tab>
  </van-tabs>
</div>
·list·
methods:{
    toDetail(index,curList,itemObj,stageId){//跳转到详情页面
        curList==1?localStorage.setItem('menList',JSON.stringify(this.list1)):localStorage.setItem('menList',JSON.stringify(this.list2));//任务详情 已完成/未完成人员列表数据
        this.$router.push({
            path: "/detail",
            query: {
                index:index,//当前人下标
                curList:curList,//是列表1或列表2
                name:sObj.name,
                stageId:stageId,//当前列表id
            }
        });
    },
}
·detail·
watch: {
    '$route.query.index': function () {
        this.pageQuery = this.$route.query;
        this.getData();//请求接口数据
    }
},
created() {
    this.pageQuery = this.$route.query;
    sessionStorage.setItem('detailPersonIndex',this.$route.query.index);
    this.getData();
},
methods:{
    toPersonIndex(){//返回列表页
        let returnIndex = Number(this.$route.query.index) - Number(sessionStorage.getItem('detailPersonIndex')) + 1;
        this.$router.go(-returnIndex);
    },
    toNextDetail(){//查看下一人的详情页面
      let arrIndex = Number(this.$route.query.index);
      if ( arrIndex == (this.menList.length-1) ) {//this.menList:前一页缓存的人员列表
        return false;
      }
      this.loadShow = true;
      this.$router.push({
        query: {
          index:arrIndex+1,
          curList:this.$route.query.curList,
          stageId:this.$route.query.stageId,
          name:this.menList[arrIndex+1].name,
        },
      });
    },
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值