解决vue-router4缓存页与不缓存页切换失效的问题

最新推荐文章于 2025-03-16 14:21:00 发布

小志哥斯拉

最新推荐文章于 2025-03-16 14:21:00 发布

阅读量1.8k

点赞数 2

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_55510188/article/details/127312982

版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用Vue-router4实现组件缓存，通过监听路由变化并利用keep-alive的include属性来控制组件缓存，确保了从缓存页面切换后再返回仍保持原有状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router4缓存组件的新写法：

问题

根据参考的示例，一开始我是这样写的（问题代码）：

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

这样会存在一个问题，当从缓存页切到不缓存页，再从不缓存页返回到缓存页时，缓存失效，缓存页会重新加载。

解决

还是按照官方的方法来吧，使用include属性。

将代码修改成：

<script setup>
import { ref, watch } from 'vue' 
import { useRoute } from 'vue-router'

const route = useRoute()

// 缓存的页面
const cachedViews = ref([])

// 监听路由改变
watch(
  () => route.path,
  () => {
    // 缓存页面
    if(route.meta.keepAlive && cachedViews.value.indexOf(route.name) == -1) {
      cachedViews.value.push(route.name)
    }
  }
)

</script>

<template>

  <!-- 页面内容 -->
    <router-view v-slot="{ Component }">
      <keep-alive :include="cachedViews">
        <component :is="Component" />
      </keep-alive>
    </router-view>

</template>

在路由配置中，name唯一且要和组件名称相同，否则缓存无效。keepAlive用于说明该组件是否缓存。

     {
        path: '/home', 
        name: 'Home', // 用于缓存页面
        component: () => import('@/views/Home/Home.vue'), 
        meta: {
          keepAlive: true, // 是否缓存
        }
      },

问题解决。