keep-alive 缓存当前列表页,记录页面滚动位置

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」，赢取创作大礼包，挑战创作激励金**

Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,上一篇文章我是给大家介绍了我实现 #倒计时功能，今天我来给大家介绍一下keep-alive缓存当前列表页，记录页面滚动位置；但是我用的时候出了些问题找了我半天才找到问题；具体遇到什么问题先卖一下关子；

正文开始了~

keep-alive缓存当前列表页

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

第一种方法

首先要在vue项目App.vue的页面加上keep-alive相关代码

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

然后再router文件里面设置要缓存页面的路由keepAlive为true;想全部页面缓存那么全部路由keepAlive为true,部分缓存的话那么不缓存页面的路由keepAlive为false

第二种方法

include -字符串或正则表达式。名称匹配的组件才会被缓存。

  <keep-alive :include="['TabList']">
       <router-view />
  </keep-alive>
  //多个这样写 :include="['TabList','list']"
  
  对应的在要缓存的页面的export default里面加上name:'TabList';

这样既可实现缓存页面的效果

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。(语法同上)

max - 数字。最多可以缓存多少组件实例。

<keep-alive :max="10">   <router-view /> </keep-alive>

我当时用的时候连缓存页面的作用都没有;我当时是从列表跳转到详情,然后详情再跳回列表;在详情页加了一下代码导致我keep-alive相关代码失效了;直到现在我也不知道这里为什么错了;

(有知道的大佬麻烦告诉我一下,我也想知道)

 beforeRouteEnter(to, from, next) {
 if (to.path !== global.location.pathname) {
    location.assign(to.fullPath)
  } else {
     next()
  }
  },
  

记录页面滚动位置

首先在要缓存切换记录滚动位置的页面加上ref属性以方便获取dom元素

在此页面加上这两个生命周期函数钩子;在mounted里面获取滚动元素的父元素的dom,并添加监听滚动事件获取滚动高度;然后在ativated里面记录滚动的位置

activated() {
  // 该路由组件激活时，记录滚动位置
  this.$refs.articleListRef.scrollTop = this.scrollTop
},
mounted() {
  const artListDom = this.$refs.articleListRef
  // 当其滚动时，记录滚动后的top位置
  artListDom.addEventListener('scroll', () => {
  this.scrollTop = artListDom.scrollTop
  })
  },

结语:

好了文章到这就结束了;写勒一天的文章一共写了两篇;不知道掘金社区会不会给我颁发个劳模奖呢.写文章写得我头晕脑胀的;因为在写文章的过程中我也用代码再次实践一下遇到一些错误也花了点时间解决;希望此文章对你们有帮助;

( 点赞+评论+关注 ) 有问题可以来互相交流一下

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」