作用:避免多次重复渲染降低性能,组件可以缓存下来,维持当前的状态
app.vue
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
2.在路由中设置keepAlive
{
path: 'home',
name: 'home', // 首页
component (resolve) {
require(['@/pages/home'], resolve)
},
meta: {
keepAlive: true,
title: '首页'
}
}
3.更改 beforeEach钩子
判断页面是在前进还是后退
let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
// console.log('back...')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
4、记录页面滚动位置
keep-alive并不会记录页面的滚动位置
(1)在deactivated钩子中记录当前滚动位置,使用localStorage:
deactivated () {
window.localStorage.setItem(this.key, JSON.stringify({
listScrollTop: this.scrollTop
}))
}
(2)在activated钩子中滚动
this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)