vue3 keepalive缓存问题

 有三个页面，upload到chart到three，我想实现chart到three ，返回时chart缓存不刷新，upload到chart时，chart不缓存，这个怎么实现

首先你可以给 chart 页面配置一个 noCache 参数，标记该页面是否需要缓存：

{
    path: '/chart',
    name: 'chart',
    component: () => import('@/views/ChartView.vue'),
    meta: {
        noCache: false // 默认需要缓存
    }
}

在跳转到 /three 页面时，设置 noCache 参数为 true，同时在 three 页面中监听路由变化，在返回时手动刷新 /chart 页面：

import { onBeforeRouteLeave, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
 
export default {
  setup() {
    const router = useRouter()
    const shouldRefresh = ref(false)
 
    onMounted(() => {
      router.beforeEach((to, from) => {
        if (from.name == 'three' && to.name == 'chart' && shouldRefresh.value) {
          router.replace({ name: 'empty' })
          // 手动刷新页面
          setTimeout(() => {
            router.replace({ name: 'chart' })
            shouldRefresh.value = false
          }, 0)
          return false
        }
      })
    })
 
    onBeforeRouteLeave(() => {
      if (router.currentRoute.value.name == 'three') {
        shouldRefresh.value = true
      }
    })
  }
}

最后是 upload 到 chart 时，chart 不缓存。这个我不太确定是否有必要，因为如果 meta.keepAlive 属性为 false，chart 页面在离开时已经被销毁了，再进入时就不存在缓存问题了。如果确实需要这个功能，可以在 upload 页面路由跳转时，修改 /chart 路由的 meta.keepAlive 属性即可：

router.beforeEach((to, from, next) => {
  if (from.name == 'upload' && to.name == 'chart') {
    const chartRoute = router.getRoutes().find(route => route.name == 'chart')
    if (chartRoute) {
      chartRoute.meta.keepAlive = false
    }
  }
  next()
})

上面代码中找到了 /chart 路由，并将其 meta.keepAlive 属性修改为了 false。需要注意的是，这样做修改的是路由配置，如果你需要立即生效，需要使用 router.replace({ name: 'chart' }) 重新跳转到 /chart 页面。