vue keep-alive的简单使用

最新推荐文章于 2023-07-06 16:30:31 发布

原创最新推荐文章于 2023-07-06 16:30:31 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

技术（javascript）专栏收录该内容

114 篇文章

订阅专栏

本文介绍了如何使用Vue的<keep-alive>组件来实现视图缓存，包括全部缓存及选择性缓存的方法，并提供了具体的代码示例。

缓存组件（全部缓存）

来到的你app.vue

<keep-alive>
    <router-view>
        <!--这里是会被缓存的视图组件 -->
    </router-view>
</keep-alive>

如果你想选择性缓存

在app.vue写成这样（vue2.0只能有一个根节点）

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

然后来到你的路由

router.js

{
    path: '/',
    name: 'home',
    component: Home,
    meta: {
        keepAlive: true // 需要被缓存
    }
}, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
        keepAlive: false // 不需要被缓存
    }
}