keep-alive有时候我们不希望组件被重新渲染影响使用体验；
或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 官网释义：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。
如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验：
keep-alive的生命周期created > mounted > activateddeactivatedactivatedmounted 中；组件每次进去执行的方法放在 activated 中一、更改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>
二、在路由中设置keepAlive
{ path: ‘list‘, name: ‘itemList‘, // 商品管理 component (resolve) { require([‘@/pages/item/list‘], resolve) }, meta: { keepAlive: true, title: ‘商品管理‘ } }
三、更改
beforeEach钩子
这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存：
为了解决这个问题，需要判断页面是在前进还是后退。 在beforeEach钩子添加代码：
let toDepth = to.path.split(‘/‘).length let fromDepth = from.path.split(‘/‘).length if (toDepth < fromDepth) { // console.log(‘后退。。。‘) from.meta.keepAlive = false to.meta.keepAlive = true }
keep-alive并不会记录页面的滚动位置，所以我们在跳转时需要记录当前的滚动位置，在触发activated钩子时重新定位到原有位置。 具体设计思路：
deactivated钩子中记录当前滚动位置，在这里我使用的是localStorage：deactivated () { window.localStorage.setItem(this.key, JSON.stringify({ listScrollTop: this.scrollTop })) }
activated钩子中滚动：this.cacheData = window.localStorage.getItem(this.key) ? JSON.parse(window.localStorage.getItem(this.key)) : null $(‘.sidebar-item‘).scrollTop(this.cacheData.listScrollTop)
原文：https://www.cnblogs.com/magicg/p/15088746.html