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

你这个问题需要在路由间传递参数来控制缓存。

首先你可以给 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 页面。