keep-alive 参考文档
-
Props：
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max- 数字。最多可以缓存多少组件实例。
-
用法：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在
<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。在 2.2.0 及其更高版本中，
activated和deactivated将会在<keep-alive>树内的所有嵌套组件中触发。
实现步骤
- 给app.vue中的<router-view />添加keep-alive组件，并通过include来决定缓存哪些页面
<template>
<div id="app">
<!-- 路由的出口 -->
<keep-alive include="LayoutIndex">
<router-view />
</keep-alive>
</div>
</template>
- 在文章列表页加载的时候监听元素滚动事件，记录当前浏览的滚动条的高度
<template>
<div class="article-list" ref="article-list">
...
</div>
</template>
data () {
+ scrollTop: 0 // 列表滚动的高度
}
mounted () {
// 当页面加载的时候监听列表元素的滚动事件，把列表的滚动高度记录下来
const articleList = this.$refs['article-list']
articleList.onscroll = () => {
this.scrollTop = articleList.scrollTop
}
}
- 然后在切换到缓存的组件时，在activated钩子函数中把高度设置为保存的高度
activated () {
// activated生命周期函数 被 keep-alive 缓存的组件激活时调用。
// 该钩子在服务器端渲染期间不被调用。
// 把记录的到顶部的距离重新设置回去
this.$refs['article-list'].scrollTop = this.scrollTop
}
-
此时发现连个人中心也被缓存了，需要把个人中心排除掉，通过路由的meta属性来定义需要加keep-alive组件的路由
{ path: '', // 默认子路由，只能有1个 name: 'home', component: () => import('@/views/home'), meta: { keepAlive: true } },然后在app.vue根组件判断一下需要缓存的组件
<template> <div id="app"> <!-- 路由的出口 --> <keep-alive include="LayoutIndex"> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" /> </div> </template> -
既然通过不同的路由地址来实现缓存，那么此时include="LayoutIndex"就没有意义了，而且去掉之后像问答，视频的模块也不会被缓存了。
<template> <div id="app"> <!-- 路由的出口 --> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" /> </div> </template> -
继续优化，给第2步监听滚动条位置事件，增加防抖
import { debounce } from 'lodash' mounted () { // 当页面加载的时候监听列表元素的滚动事件，把列表的滚动高度记录下来 const articleList = this.$refs['article-list'] articleList.onscroll = debounce(() => { console.log(articleList.scrollTop) this.scrollTop = articleList.scrollTop }, 100) }
最终的代码：
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>
router/index.js
{
path: '', // 默认子路由，只能有1个
name: 'home',
component: () => import('@/views/home'),
meta: {
keepAlive: true
}
}
views/home/components/article-list.vue
import { debounce } from 'lodash'
data () {
return {
...
scrollTop: 0 // 记录滚动条的高度
}
}
// 当缓存组件被激活的时候触发
activated () {
this.$refs['article-list'].scrollTop = this.scrollTop
},
mounted () {
// 获取文章列表容器的引用对象
const articleList = this.$refs['article-list']
articleList.onscroll = debounce(() => {
// console.log(articleList.scrollTop)
this.scrollTop = articleList.scrollTop
}, 50)
},
