keep-alive

keep-alive

keep-alive 标签 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执 行。

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>

include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

App.vue里操作

<div id="app">

      <keep-alive>
        <router-view class="Router" v-if="$router.meta.keepalive" />
      </keep-alive>
      <router-view v-if="!$router.meta.keepalive" ></router-view>
需要缓存的放入keep-alive标签里  不需要的放在外面的router-view 标签里
  </div>

路由配置

 {
    path:'/det',
    name:'det',
    meta:{
      keepalive:true,
      title:'商品管理'
    },
    component:()=>import('../views/det.vue')
  }

这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存：

若第一次进入A页面后退出，再次进入页面时，页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回，页面保持不变，而不是退出后重新进入保持不变。
在进入过A页面后进入B页面，经过测试后发现，B页面竟然会显示A页面的缓存，尽管url已经改变

let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('back...')
  from.meta.keepalive = false
  to.meta.keepalive = true
}

记录页面滚动位置
在deactivated这个函数里操作

 this.scrollY=document.querySelector('max').scrollTop;

activated

this.$refs.max.scrollTop=this.scrollY```