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;
  },
相关推荐
CIO_Alliance16 分钟前
AI提示系列(2)| Few-shot与ReAct有何不同? 大模型工具调用的底层逻辑详解
前端·人工智能·深度学习·神经网络·react.js·前端框架·ai+ipaas
waillyer37 分钟前
企业知识库智能问答 Agent(React + Nest)
javascript·redis·agent
cindershade38 分钟前
别只收三个数字:前端 RUM 如何建立可解释的体验数据链
前端
前端 贾公子1 小时前
第09章:上下文与记忆 (4)
java·服务器·前端
Coodor1 小时前
使用web也可以写NFC微信小程序拉取
前端·微信小程序·小程序·nfc拉起小程序
Wang's Blog2 小时前
Vibe Coding一人即团队系列28: 前端、后端与数据库的概念解析
前端·数据库
Dovis(誓平步青云)2 小时前
模拟器横评:电脑上看小说、追短剧用什么模拟器?MuMu、雷电、腾讯手游助手实测
android·java·服务器·前端·javascript·电脑
踩蚂蚁2 小时前
把自定义唤醒词部署到 ESP32-S3:ONNX 转 INT8 TFLite 的完整链路
前端
前端繁华如梦2 小时前
用 Vite + Electron + React + Python 重造 3D 服装打版软件
前端