阅读数:147 评论数:0

缓存页面主要Jul为了防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。

一、旧版的语法

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

二、新版

1、方式一

  <router-view v-slot="{ Component }">
    <keep-alive v-if="$route.meta.keepAlive">
      <component :is="Component" >
        <p>缓存页面</p>
      </component>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive">
      <p>没有缓存的页面</p>
    </component>
  </router-view>

假如A、B为缓存页面，C不是缓存页面，A、B间跳转不会有问题，但A、B跳转C页面再返回时，缓存页会失效一次，这样可能和我们所预期的效果不太一样。

2、方式二

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

</template>
 
<script lang="ts">
//使用动态include解析
//app.vue文件
  export default {
    name: 'App',
    data(){
      return {
        includeList : []
      }
    },
    watch:{
      $route(to:any) {
        //监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中
        const that:any = this;
        if(to.meta.keepAlive && that.includeList.indexOf(to.name) === -1){
          that.includeList.push(to.name);
        }
      }
    }
  }
</script>

三、keepalive不会刷新后台数据

在 Vue 应用中，使用 <keep-alive> 包裹 <router-view> 可以使得组件状态在用户浏览时保持不变，这意味着组件的生命周期钩子不会重新被触发，因此任何在 mounted 或 created 钩子中进行的数据获取操作不会在组件缓存后重新执行。

如果你需要在每次路由切换时刷新后台数据，即使组件被 <keep-alive> 缓存，有几种方法可以做到这一点：

１、监听路由变化

你可以在 setup 函数中或者在组件的其他生命周期钩子中使用 watch 来监听 $route 对象的变化，并在变化时重新获取数据。

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const fetchData = async () => {
      // 假设 getData 是一个获取数据的异步函数
      const data = await getData();
      // 更新你的数据状态
    };

    // 在 setup 中立即调用一次获取初始数据
    fetchData();

    // 监听路由变化
    watch(() => route.path, () => {
      fetchData();
    });

    return {
      // ...
    };
  },
};

２、使用导航守卫

你可以在路由器配置中使用导航守卫，比如 beforeEach 或 beforeRouteEnter，在路由切换时触发数据更新。

const router = createRouter({
  // ...其他路由配置
});

router.beforeEach((to, from, next) => {
  if (to.path !== from.path) {
    // 假设 store.dispatch 是 Vuex 中触发 action 的方法
    store.dispatch('fetchData');
  }
  next();
});

３、使用activated钩子

对于使用 <keep-alive> 缓存的组件，每次激活（即显示到屏幕上）时，都会触发 activated 钩子。你可以在这个钩子中重新获取数据。

export default {
  // ...
  activated() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // 获取数据的逻辑
    },
  },
};

４、使用deactivated钩子

与 activated 钩子相对，deactivated 钩子在组件每次被 <keep-alive> 缓存移除时触发。你可以在 deactivated 钩子中进行清理操作，比如取消正在进行的 API 请求。

export default {
  // ...
  deactivated() {
    // 清理操作，比如取消 API 请求
  },
};