缓存界面
1.在router内,要缓存的页面设置keepAlive如果为true
keepAlive如果为true,就会使用keep-alive缓存起来,否则就不会被缓存
{
path: '/taskList',
name: 'SaskList',
meta:{
keepAlive: true
},
component: ()=>import('@/xx/xx')
}
2.在app.vue里面
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
3.在layout页面设置导航首位
beforeRouteleave(to,from,next) {
if(to.path==='搜索'&&from.path==='列表页' ){
// 搜索 到 我的待办 不刷新
this.$set(this.$route.meta,'keepAlive',true)
}
if(to.path==='首页'&&from.path==='列表页' ){
// 首页到 我的待办 刷新
this.$set(this.$route.meta,'keepAlive',false)
}
}
具体更多的功能:还原滚动条的滑动距离
参考:https://www.cnblogs.com/HJ412/p/12383617.html
还原滚动条的滑动距离
绑定onscroll 事件
在生命周期 mounted 为DOM元素绑定 onscroll 事件,实时 保存 滑动的距离
mounted(){
// 为了使this指向组件实例, 需要使用箭头函数
this.$refs.searchList.addEventListener('scroll', () =>{
// 实时 滑动的距离 会保存在 vuex中,也可以保存在 session storage中
this.$store.commit('setState', {searchTop: this.$refs.searchList.scrollTop})
})
}
还原滑动距离
使用 组件的 路由守卫钩子 beforeRouteEnter,当详情页 进入搜索页,取出滑动的 距离 scrollTop 并赋值,否则设置 滚动条的 距离为 0,因为 beforeRouteEnter 钩子函数 访问不了this,因此需要 通过 next的回调函数 访问 this(vm)。
beforeRouteEnter (to, from, next) {
next(vm =>{
// 详情页进入搜索页 初始化滚动条
if(from.name === 'Detail'){
vm.$refs.searchList.scrollTop = vm.$store.state.searchTop
}else{
// 非详情页进入搜索页 设置滚动条为初始值 0
vm.$store.commit('setState', {searchTop: 0})
}
})
}