L'utilisation de keep-alive, keep-alive enregistre la position de la barre de défilement.

1. Keep-alive est un composant intégré fourni par Vue, qui met en cache les instances de composants inactifs au lieu de les détruire . Il est utilisé comme étiquette et enveloppé à l'extérieur du composant qui doit être mis en cache.

2. Gardez les composants commutés en mémoire pendant le processus de commutation des composants pour éviter le rendu DOM répété, réduire le temps de chargement et la consommation de performances, et améliorer l'expérience utilisateur

3. Fonction : Par exemple, lorsque la page de liste entre les détails, nous voulons enregistrer la position de défilement de la liste, nous pouvons utiliser keep-alive pour enregistrer la position de défilement de la page de liste.

4. Après que le composant utilise keep-alive, deux nouveaux cycles de vie actived() deactived() seront ajoutés

activated 被缓存的组件激活时调用。

deactivated  Appelé lorsque le composant de cache est désactivé.

<template>
  <div class="maxBox">
    <div ref="list" @scroll="alive" class="content-list">
      <li v-for="(v, i) in 100" :key="i">{
   
   { v }}</li>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      scrollPages: 0, // 缓存当前滚动条的位置
    };
  },
  mounted() {},
  methods: {
    alive(e) {
      console.log(e.target.scrollTop);
     // 获取页面滚动条的位置
      this.scrollPages = e.target.scrollTop; 
    },
  },
  activated() {
    // 缓存组件激活时调用
    this.$refs.list.scrollTop = this.scrollPages; // 获取 dom 的scrollTop = 缓存的滚动条位置
  },
};
</script>

<style lang="scss">
.maxBox {
  width: 100%;
  height: 100%;
}
.content-list {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  li {
    width: 100%;
    height: 20px;
    background-color: #ccc;
    margin: 20px 0;
    display: flex;
  }
}
</style>

app.vue

<template>
  <div id="app">
    <!-- include 指定要缓存的页面， Home 页面要有配置name:Home。 
     要想缓存多个以 , 分割后面跟组件名字  -->
    <!-- exclude 指定不需要缓存的页面 -->
    <keep-alive include="Home,About">
      <router-view />
    </keep-alive>

    <!-- 数组 -->
    <!-- <keep-alive :include="['Home','About']">
      <router-view />
    </keep-alive> -->

    <!-- 正则 -->
    <!-- <keep-alive :include="/Home|About/">
      <router-view />
    </keep-alive> -->

    <footer>
      <router-link to="/">页面一</router-link>
      <router-link to="/About">页面二</router-link>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>
<style lang="scss">
// 要给父元素设置高100%否则不生效
body,
html,
#app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}

footer {
  width: 100%;
  height: 40px;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

Mo attend le garçon blanc, la tête est vide et triste - s - z -h