APP中列表到详情,详情返回列表时候,返回定位到之前查看详情那条数据

APP中列表到详情,详情返回列表时候,返回定位到之前查看详情那条数据

一、APP.vue 中

javascript 复制代码
<template>
  <div id="app">
    <keep-alive :include="aliveArr">
      <router-view ></router-view>
    </keep-alive>
  </div>
</template>

import { mapState } from 'vuex';
computed: {
   ...mapState(['aliveArr']),
 },

二、store.index.js中

javascript 复制代码
 state: {
    aliveArr: [],
  },
  
 mutations: {
   setAliveArr(state, params) {
     state.aliveArr = params;
   },
 },

三、列表组件.vue中

javascript 复制代码
 beforeRouteLeave(to, from, next) {
    //this.scrollPosition是离开之前的滚动值
    from.meta.scrollTop = this.scrollPosition; 
    if (to.path === '/SearchDetail') {
      this.$store.commit('setAliveArr', ['addWhiteScene']);
    } else {
      this.$store.commit('setAliveArr', []);
    }
    next();
  },
  activated() {
    document.getElementsByClassName('leftReturn')[0].scrollTop = this.$route.meta.scrollTop;
  },
相关推荐
labixiong7 分钟前
还原一个完整符合规范的 Promise(二)
前端·javascript
时光足迹15 分钟前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app
时光足迹24 分钟前
uni-app 里把加密视频嵌入页面播放?我分析了 4 种方案,只有 1 种接近完美
前端·vue.js·uni-app
时光足迹39 分钟前
JPush UniApp UTS 插件完全参考手册:API、事件与厂商通道一网打尽
vue.js·ios·uni-app
时光足迹1 小时前
极光推送全攻略(下):uni-app 代码实现与 iOS 排查实战
vue.js·ios·uni-app
To_OC1 小时前
万字解析《JS 语言精粹》之第五章:继承 5 大核心精髓(JS 原型核心)
前端·javascript·代码规范
时光足迹1 小时前
极光推送全攻略(上):被iOS证书折磨了三天,我写了一份前端也能看懂的避坑指南
前端·ios·uni-app
DyLatte1 小时前
AI 时代,最危险的不是被替代,而是努力不沉淀
前端·后端·程序员
mCell2 小时前
【锐评】桌面端技术营销:别拿跑分当工程判断
前端·rust·electron
柒和远方2 小时前
从一次工程审查看 AI 学习产品的边界兜底:RAG 资料链路一致性实战
前端·后端·架构