keep-alive 组件缓存和 lodash 防抖

app.vue
在app.vue根组件判断一下需要缓存的组件

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 字段（元数据）

1. 直接在路由配置的时候，给每个路由添加一个自定义的 meta 对象，在 meta 对象可以设置一些状态，来进行一些操作
2. 用来做登录校验最合适
   3.情景：
   我们给需要身份认证的路由加上meta属性 设置一个login：true
   我们就可以判断$route.meta.login如果为true进行判断是否登录，否则，就强制跳转到登录页面