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;
  },
相关推荐
再学一点就睡11 小时前
前端网络实战手册:15个高频工作场景全解析
前端·网络协议
C_心欲无痕12 小时前
有限状态机在前端中的应用
前端·状态模式
C_心欲无痕12 小时前
前端基于 IntersectionObserver 更流畅的懒加载实现
前端
candyTong12 小时前
深入解析:AI 智能体(Agent)是如何解决问题的?
前端·agent·ai编程
柳杉12 小时前
建议收藏 | 2026年AI工具封神榜:从Sora到混元3D,生产力彻底爆发
前端·人工智能·后端
weixin_4624462312 小时前
使用 Puppeteer 设置 Cookies 并实现自动化分页操作:前端实战教程
运维·前端·自动化
CheungChunChiu12 小时前
Linux 内核动态打印机制详解
android·linux·服务器·前端·ubuntu
Irene199113 小时前
Vue 官方推荐:kebab-case(短横线命名法)
javascript·vue.js
GIS之路13 小时前
GDAL 创建矢量图层的两种方式
前端
2501_9481953414 小时前
RN for OpenHarmony英雄联盟助手App实战:符文配置实现
javascript·react native·react.js