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;
  },
相关推荐
不绝19118 分钟前
UGUI——进阶篇
前端
~牧马~24 分钟前
【记录63】electron打包vue项目之踩坑
vue.js·electron·electron与node兼容
Exquisite.39 分钟前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
铅笔侠_小龙虾1 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525541 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
计算机学姐1 小时前
基于SpringBoot的电影点评交流平台【协同过滤推荐算法+数据可视化统计】
java·vue.js·spring boot·spring·信息可视化·echarts·推荐算法
2601_949857431 小时前
Flutter for OpenHarmony Web开发助手App实战:快捷键参考
前端·flutter
wangdaoyin20101 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步20152 小时前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠2 小时前
vue3相关知识总结
前端·javascript·vue.js