vue3 keepalive缓存问题

Question

有三个页面，upload到chart到three，我想实现chart到three ，返回时chart缓存不刷新，upload到chart时，chart不缓存，这个怎么实现哎，我没有使用vuex，更改keepalive状态总是不行
app.vue

<template>

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        v-if="$route.meta.keepAlive"
        :key="$route.name"
      ></component>
    </keep-alive>
    <component
      :is="Component"
      v-if="!$route.meta.keepAlive"
      :key="$route.name"
    ></component>
  </router-view>

</template>

<script  lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  setup() {},
});
</script>

<style scoped>
</style>

router.ts

```javascript
import chart from '@/views/ChartView.vue'
import { createRouter, createWebHistory, onBeforeRouteLeave } from 'vue-router'



const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('@/views/HomeView.vue')
        },
        {
            path: '/upload',
            name: 'upload',
            component: () => import('@/views/UploadView.vue')
        },
        {
            path: '/test',
            name: 'test',
            component: () => import('@/views/test.vue')
        },
        {
            path: '/chart',
            name: 'chart',
            component: () => import('@/views/ChartView.vue'),
            meta: {
                keepAlive: true
            }
        },
        {
            path: '/three',
            name: 'three',
            component: () => import('@/views/ThreeView.vue'),
            meta: {
                keepAlive: false
            }

        },
        {
            path: '/empty',
            name: 'empty',
            component: () => import('@/views/EmptyView.vue')
        }

    ]
})

// router.beforeEach((to, from, next) => {
//     console.log('to:', to)
//     console.log('from:', from)
//     if (from.path == '/chart' && to.path == '/upload') {
//         from.meta.keepAlive = false

//     }
//     console.log('from:', from)

//     next();
// });

export default router

```

Answer 1

每个路由里边都没有设置 keepAlive 属性，取得话都是false
v-if="$route.meta.keepAlive" 永远都是 不渲染的，所以 用keep-alive 包裹有什么用呢