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

功能描述:

      在一个大的父组件中,根据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 
           }
        }]

猜你喜欢

转载自blog.csdn.net/pshdhx/article/details/107554383