Vue切换组件，返回后不重置数据，保留历史设置

最新推荐文章于 2025-06-13 10:06:52 发布

原创最新推荐文章于 2025-06-13 10:06:52 发布 · 6.5k 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍Vue.js中如何使用<keep-alive>组件进行路由视图的缓存管理，包括基本用法及如何排除指定组件不被缓存。适用于希望提升用户体验并了解Vue内部机制的前端开发者。

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

1、<router-view ></router-view> 外层包围<keep-alive> </keep-alive>

keep-alive作用将组件实例缓存下来

<keep-alive>
    <router-view></router-view>
</keep-alive>

2、清除组件缓存

使用keep-alive 的 exclude="组件名" 属性

<keep-alive exclude="home">
        <router-view ></router-view>
</keep-alive>