Vue.js中keep-alive缓存（页面+滚动条）

Vue.js中keep-alive缓存（页面+滚动条）

1、要缓存的标签中加入

 <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

2、router文件中meta加入keepAlive

{
  path: '/brandEquity',
  name: 'brandEquity',
  meta: {
    title: '品牌权益',
    keepAlive: true
  },
  component: () => import('@/views/pCenter/myRank/brandEquity')
}

const router = new VueRouter({
  routes,
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

scrollBehavior 里处理是否使用路由缓存滚动条，由于本人用的mand-mobile里的md-scrollview包裹的列表，好像这个路由方法没生效。

3、处理缓存逻辑

只缓存从列表详情跳回列表的页面，在要缓存的vue页面内加入路由内守卫beforeRouteLeave

 beforeRouteLeave (to, from, next) {
    // ...
    if(to.path == '/equityDetail'){
      from.meta.keepAlive = true
    }else{
      from.meta.keepAlive = false
    }
    next()
  }

• 首先，在跳转的时候，需要存一下滚动条的位置，即滚动元素的scrollTop；
• 由于页面加入keep-alive，vue只执行activated和deactivated两钩子，所以返回来逻辑需要在activated里写
• 代码如下：

//跳走存入
this.scrollTop = this.$refs.scrollView.getOffsets().top //这里使用mand-mobile的钩子方法，如不使用，将滚动元素的scrollTop存下即可
//this.scrollTop = this.$refs.wrapper.scrollTop;

//回来赋值
activated() {
    this.$nextTick(() => {
      setTimeout(() => {
      //这里也是mand的钩子，如不用，用下边赋值
        this.$refs.scrollView.scrollTo(0, this.scrollTop,true)
        /*原生scroll
        this.$refs.wrapper.scroll({
          top: this.scrollTop,
          left: 0,
          behavior: "smooth" //滚动条平滑滚动
        });
        */
      }, 500);
    })
  }