vue中进入详情页记住列表滚动位置keep-alive解决

一、配置路由 keepactice:true

  {
     	 path: '/index',
     	 name: 'index',
     	 component: index,
     	 meta: {
       		 keepalive: true // 组件是否需要被保存
     	 }
    }

二、在App.vue页面当中，将需要保存的组件通过路由标签router-view，写在keep-alive标签里（区分keepalive大小写）

<div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"></router-view>      
</div>

App.js设置记住滚动的值：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
	state: {
	    top: 0 //滚动条初始位置
	},
	mutations: {
	      setHomeListTop(state, top) {
	        state.top = top;
	      },
	},
	actions: {
	    setListTop(context, status) {
	        context.commit("setHomeListTop", status);
	    },
	}
});
export default store;

三、在组件中使用

<div class="order-list" ref="scroll">
</div>

export default {
    methods: {
        recordScrollPosition(e) {
	    let top= e.target.scrollTop;
	    this.$store.state.top = top;
	}
    },
    mounted() {
	let that = this;
	this.$nextTick(() => {
		this.$refs.scroll.addEventListener("scroll", that.recordScrollPosition, true);
	});
    },
    activated() {//keep-alive加载时调用
	this.$refs.scroll.scrollTop = this.$store.state.top;
	let that = this;
	this.$refs.scroll.addEventListener("scroll", that.recordScrollPosition, true);
    },
    deactivated() { //页面退出时关闭事件 防止其他页面出现问题
	let that = this;
	this.$refs.scroll.removeEventListener("scroll", that.recordScrollPosition, true);
    }

}