Vue.js中keep-alive缓存(页面 滚动条)

  时间:2020-08-06 10:18:49  阅读量:20  评论数:0  作者:JeFerone

该文着重介绍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);
    })
  }

关键词:vue.js,javascript,缓存,页面,滚动,滚动条