app.vue
在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
1.在文章列表页加载的时候监听元素滚动事件，记录当前浏览的滚动条的高度
2.然后在切换到缓存的组件时，在activated钩子函数中把高度设置为保存的高度
3.给监听滚动条位置事件，通过 lodash 增加防抖
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)
},
meta 字段（元数据）
直接在路由配置的时候，给每个路由添加一个自定义的 meta 对象，在 meta 对象可以设置一些状态，来进行一些操作
用来做登录校验最合适
3.情景：
我们给需要身份认证的路由加上meta属性 设置一个login：true
我们就可以判断$route.meta.login如果为true进行判断是否登录，否则，就强制跳转到登录页面
