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

我在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

<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 组件。

【以下回答由 GPT 生成】

【问题标题】：如何在Vue 3 + Vite项目中正确使用路由和动态组件缓存？

【问题标签】：缓存

【问题内容】： 我正在使用Vue 3 + Vite项目，并且遇到了在路由中使用动态组件缓存的问题。以下是我的路由代码：

// 这是主页面，使用了Element UI布局
<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>
  import { ref } from 'vue';

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

同时，我还有一个动态组件的使用如下：

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

问题： 当我从组件B跳转到详情路由，然后再返回时，我使用了keep-alive来缓存组件，但为什么它会渲染组件A而不是组件B？

解决方案： 在Vue 3中，KeepAlive组件的include属性接收的是组件的名称，而不是路由的名称。因此，你在cachedRoutes中应该存储组件的名称而不是路由的名称。此外，还要确保在路由跳转时正确设置当前组件名称currentComp。

以下是修改的代码：

// 这是主页面，使用了Element UI布局
<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="cachedComps">
          <RouterView />
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
  import { ref, watch, getCurrentInstance } from 'vue';

  const cachedComps = ref(['GamePlay', 'StudyWork']);
  const currentComp = ref('');

  const route = useRoute(); // Vue Router的路由对象

  watch(() => route.name, (to, from) => {
    if (to && from) {
      currentComp.value = to;
    }
  }, { immediate: true });  
</script>

现在，将组件名称存储在cachedComps中，并使用currentComp来保存当前组件的名称。在路由跳转时，监听路由对象的变化，更新currentComp的值。

希望这个解决方案能够解决你的问题。如果您还有其他问题，请随时提问。

【相关推荐】

• 这篇博客: Vue3表单页面利用keep-alive缓存数据的一种思路中的 前置条件 部分也许能够解决你的问题。

如果想要做成这个效果，单靠普通的缓存是不行，我这边有一个笨办法，就是缓存组件的名字，也可以参考我采纳的答案，我的做法是，在切换组件的时候，存一个命字去缓存 sessionStorage.setItem('gameisDarg', bgName)，然后在生命周期中取，如果进来有缓存就自己跳去那个动态组件：

onMounted(() => {
  if (sessionStorage.getItem('gameisDarg') == 'GameSrores') {
    currentComp.value = GanmeSrores
  isDarg.value = sessionStorage.getItem('gameisDarg')

  }
  if (sessionStorage.getItem('gameisDarg') == 'GameCharts') {
    currentComp.value = GameCharts
  isDarg.value = sessionStorage.getItem('gameisDarg')

  }
 
})