Vue中keep-alive配合router-view缓存路由

最新推荐文章于 2025-03-07 14:53:45 发布

jfengz

最新推荐文章于 2025-03-07 14:53:45 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/xjf106/article/details/101710166

版权

Vue.js 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Vue中Keep-Alive组件的使用方法及其在不同版本中的变化，包括如何通过include和exclude属性有条件地缓存组件，适用于Vue 2.1.0及以后版本。同时，展示了如何在路由配置中利用$router.meta.keepAlive属性实现组件的缓存控制。

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

vue 2.1.0 之前：

<!-- template -->
<keep-alive>
    <router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$router.meta.keepAlive"></router-view>

//router配置
new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B,
            meta: {
                keepAlive: false
            }
        }
    ]
})

vue 2.1.0 之后：

2.1.0 新增：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <router-view></router-view>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <router-view></router-view>
</keep-alive>