Vue切换页面保存缓存数据或文件的两种方式

pshdhx_albert

于 2020-07-24 10:02:41 发布

阅读量8.8k

点赞数 2

分类专栏：前端开发文章标签： vue.js

本文链接：https://blog.csdn.net/pshdhx/article/details/107554383

版权

前端开发专栏收录该内容

32 篇文章

订阅专栏

本文介绍在Vue.js中如何利用<keep-alive>标签解决因v-if引起的组件重复加载问题，确保子组件状态不丢失，适用于需要保留用户输入或上传文件的场景。

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

功能描述：

在一个大的父组件中，根据tab页面的v-if进行切面的切换，但是v-if的切换会造成组件的销毁，再切换回去输入的数据或者上传的文件就没有了，所以切换页面不能让tab页面的子组件销毁。

解决：

在子组件的外边包上一个<keep-alive></keep-alive>的标签；

如果是路由的方式，那么就在<router-view>外边包上<keep-alive>

或者是在定义路由组件的时候在routes[]里边的元数据meta中定义。

routes:[{
        path: '/home',
        component: Home,
        meta: {
            title:'测试tab页面切换的缓存问题',
            keepAlive: true 
           }
        }]