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;
  },
相关推荐
何中应6 小时前
MindMap部署
前端·node.js
boooooooom6 小时前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
NAGNIP6 小时前
程序员效率翻倍的快捷键大全!
前端·后端·程序员
wxin_VXbishe6 小时前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
一个网络学徒6 小时前
python5
java·服务器·前端
tiantian_cool6 小时前
Claude Opus 4.6 模型新特性(2026年2月5日发布)
前端
0思必得06 小时前
[Web自动化] Selenium获取元素的子元素
前端·爬虫·selenium·自动化·web自动化
不会敲代码16 小时前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript
用户5757303346247 小时前
🌟 从一行 HTML 到屏幕像素:浏览器是如何“画”出网页的?
前端
NEXT067 小时前
React Hooks 进阶:useState与useEffect的深度理解
前端·javascript·react.js