vue利用keep-alive进行数据的缓存

问题描述：

类似列表商城页面来回切换，数据缓存和页面高度保持不变
路由脚本文件中配置当前页面是否使用keep-alive实现缓存：

问题解决：

// router.js
{
	 path: 'home/home',
	 name: 'Home',
	 component: Home,
	 meta: {
	   isKeepAlive: true, // 配置当前页面是否开启keep-alive
	   keepAliveFrom: ['Talentpaint'] // 跳转下一个页面进行数据缓存
	 }
},

// home.vue (对应要使用keep-alive的页面的组件)
// activated 是当组件再keep-alive中来回切换时，将会对应执行
 activated() {
    const scrollTop = this.$route.meta.scrollTop
    const $wrapper = document.querySelector('.m-main')
    if (scrollTop && $wrapper) {
      $wrapper.scrollTop = scrollTop // 获取上一步from存入的值，进行页面滚动高度的设置
    }
  },
  // 离开页面检测当前也买你是否开启keep-alive，再做高度记录
  beforeRouteLeave(to, from, next) {
    if (from.meta.isKeepAlive) {
      const $wrapper = document.querySelector('.m-main') // 列表的外层容器 注意找到滚动的盒子
      const scrollTop = $wrapper ? $wrapper.scrollTop : 0 // 找到滚动过后的值，跳转时from进行存储参数
      from.meta.scrollTop = scrollTop
    }
    next()
  },