java1234开源博客系统
博客信息

vue Router路由缓存

0
发布时间:『 2019-07-30 11:33』  博客类别:Vue.js  阅读(434)

vue Router缓存路由keep-alive


平时开发应用,有那种多tab的表单;

123.jpg


类似图上,多tab页,我们要保证 用户切换的时候,表单数据依然存在;


我们把前面的实例,两个子菜单,都加个input;

GIF.gif

我们发现 每次切换,文件框里的数据都没了,说明每次切换,路由组件都销毁掉,每次点开重新生成;


如何解决这个问题呢;

vue提供了keep-alive来轻松实现,路由组件缓存;

Menu1.vue里:

QQ截图20190730112501.jpg


GIF.gif


我们会发现 两个子菜单路由组件缓存了,但是点 首页,再切换回来,又失效了,因为我们父路由组件没缓存,如果要缓存;

我们在App.vue里再加下keep-alive即可;

GIF.gif




关键字:   vue     Router     路由缓存  
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有