vue3+vite路由和动态组件缓存问题

Question

我在vue3+vite项目中，想缓存路由，路由中有动态路由组件，路由代码如下

//这是主页面，用element布局实现
<template>
<el-container>
      <el-aside style="width: var(--el-aside-width, 178px)">
        <SoftSide />
      </el-aside>

      <el-container class="father">
        <el-header>
          <SoftHeader />
        </el-header>
        <el-main>
          <keep-alive :include="cachedRoutes">
            <RouterView />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
</template>

<script setup>
  const cachedRoutes = ref(['GamePlay','StudyWork'])
</script>

然后我的动态组件是这样的：

<component :is="currentComp"></component>

如果我有三个动态组件A，B，C
我从B中调转到详情路由，然后再返回，这时候为什么我用了keep-alive还是会去组件A，而不是组件B

Answer 1

<keep-alive> 组件在 Vue.js 中用于缓存组件，当组件被切换出去时，它不会被销毁，而是处于等待状态，这样可以在下次被需要时直接使用，而无需再次创建。

你的问题可能是因为你在返回时，没有正确地设置路由的名称。当你从 B 组件返回到路由时，你需要确保路由的名称被正确地设置为 B。只有这样，Vue 才能知道它应该重新展示哪个组件。

你可以在路由配置中设置一个动态路由，例如：

{
  path: '/your-path/:componentName',
  component: () => import(`@/components/${软路由[props.componentName]}`)
}

然后，当你从 B 组件返回到路由时，你需要在路由的 name 属性中设置 B。例如：

this.$router.push({ name: 'yourRouteName', params: { componentName: 'B' }});

这样，当你在返回到这个路由时，Vue 将知道应该展示 B 组件，而不是 A 组件。