Vue keep-alive实践总结(推荐)
prop:
在2.1.0版本Vue中 常见用法: <keep-alive include="a,b"> <component :is="view"> <keep-alive :include="/a|b/"> <keep-alive :include="includedComponents"> <keep-alive exclude="test-keep-alive"> 结合router,缓存部分页面使用$route.meta的keepAlive属性: 需要在 使用效果以上面router的代码为例: Vue
{{msg}}{{msg}}
(1) 在Page1页面输入框输入“asd”,然后手动跳转到Hello页面; (2) 回到Page1页面发现之前输入的"asd"依然保留,说明页面信息成功保存在内存中; 图1 进入Page1页面,并输入"asd" 图2 跳转到Hello 图3 返回Page1页面,输入框数据会被保留 当然,也可以通过动态设置route.meta的keepAlive属性来实现其他需求, 借鉴一下这篇博客中的例子:
思路是在每个路由的 A的路由: 亲测有效哦~ keep-alive生命周期钩子函数:activated、deactivated使用 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |