一、配置路由 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);
}
}