vue keepalived,vue中keepalive

　　本文主要介绍了在Vue中设置keepAlive时遇到的问题及解决方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

设置keepAlive不生效

　　例如，在Vue页面被导航回来之后，页面被再次刷新，并且搜索条件和结果被重置。对于页面需要频繁切换的系统，体验并不好。我们希望页面第一次打开就加载，然后回去就不刷新了。

　　查阅Vue官网后发现，vue2.0提供了一个keep-alive组件。

1.在App.vue中的设置

　　模板

　　div id=应用程序

　　点火电极

　　路由器视图v-if= $ route . meta . keepalive /路由器视图

　　/保持活力

　　路由器-查看v-if=！$ route . meta . keepalive /router-view

　　/div

　　/模板

2.在router中的index.js设置

　　使用元属性

　　导出默认值[

　　{

　　路径：“/”，

　　姓名：家，

　　组件：主页，

　　元：{

　　KeepAlive:true //需要缓存的组件

　　{

　　路径：“/book”，

　　名称：书，

　　组件：书，

　　元：{

　　KeepAlive:false //不需要缓存的组件

　　}

　　]

　　如果正常，页面可以缓存有效，但如果还是不行。

　　检查路由器文件中此组件的配置名称是否与组件实例中的名称不一致。如下图，全局守护获取的to或from名称取自路由器中对应的路由对象，而App.js中keepAlive标签中的exclude是比较的组件实例中的名称。

　　在使用过程中发现组件名称与路由器配置的名称不同，keep-alive无法生效。这里也给我们提供了一个思路。如果页面不需要缓存，只需设置不同的名称(不推荐)

keep-alive缓存组件不生效的坑

坑出现背景

　　在维护公司代码时，发现里面写的watch route没有生效，无法监控子路由的表切换。组件不会被缓存，但全局组件已被缓存。每次进入此表格页面，都会触发创建的循环。花了半个小时，终于发现问题了。

坑的原因

　　保持活动缓存时，include中的名称必须与组件上的名称完全相同。如果组件没有写名字或者名字不一致，缓存就无效，每次进入组件都会触发创建的生命周期。

代码如下

　　全局组件

　　keep-alive包含=history

　　路由器视图/路由器视图

　　/保持活力

　　中等分量

　　导出默认值{

　　Name: history ，/*此处的名称必须与include中的名称一致*/

　　组件：{

　　虚函数的类创建一个表

　　如果是，问题就解决了！

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。