keepalive a组件进入b组件更新 c组件进入b组件缓存

记录一下keepalive

把a组件看成主页，b组件看成列表页，c组件看成详情页；实现了 a>b 更新b组件，c>b 缓存了b组件

首先在出口处app.vue

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="shouldInclude(route)">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      shouldInclude(route) {
        return route.meta.keepAlive ? route.name : ''
      },
    },
  };
</script>

include的作用是匹配组件名 缓存包含的组件

路由处配置meta

{
  path: '/test',
  name: 'Test',
  component: () => import('@/views/test/index.vue'),
  meta:{
    keepAlive: true
  }
},

在a组件处 使用 onBeforeRouteLeave路由守卫修改keepAlive，test就是b组件

<script setup>
  import { ref } from "vue"
  import { useRouter,onBeforeRouteLeave  } from "vue-router"
  const router = useRouter();
  onBeforeRouteLeave((to, from, next) => {
    if (to.path === "/test") {
      to.meta.keepAlive = false;  // 让 test 不缓存，即刷新
      next();
    }
  })
  const getRoute = () => {
    router.push('/test')
  }
</script>

在c组件中重复a组件操作

import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from, next) => {
    // 设置下一个路由的 meta
    to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
    next();
})

记得b组件一定要命名

export default {
    name:'Test'
}