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

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