本文主要介绍了keepAlive在Vue项目中的使用说明，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

keepAlive的使用有三个步骤：keepAlive问题说明原因包括和排除最大

keepAlive的使用

在开发过程中，如果遇到需要经常缓存的页面，并且页面较长，需要记录滚动位置，那么就需要使用keepAlive。

一共有三个步骤

1.首先，在路由的mate属性中记录keepAlive，如果需要缓存，将其设置为true。

路径：“/index”，

名称：“”索引，

组件：()=导入('././index/index ')，

meta:{keepAlive:true}

2.创建路由器实例时添加scrollBehavior方法(keepAlive只生效)。

让路由器=新路由器({

Mode:'hash '，//1，hash hash:有#号。2.历史历史：没有#。

Base:process.env.BASE_URL，//自动获取根路径

scrollBehavior:(to，from，position)={

如果(位置){

返回位置

}否则{

返回{x:0，y:0}

}

},

3.在需要缓存的路由器视图包上保持活动(路由器视图应该有两个，一个缓存时显示，一个不缓存时显示，有时不需要缓存)。

点火电极

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

/保持活力

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

注意

keep-alive中的组件有两个生命周期的挂钩函数，即激活和停用，其中activated在第一次呈现组件时调用，然后在每次激活缓存组件时调用。所以一般来说，它里面的代码需要和创建的函数里面的代码一样。

keepAlive的注意事项

问题描述

今天测试中提到了一个bug。当您重复进入同一个构建时，mounted和created中的方法不会触发，从而导致不同的页面显示。

原因

当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。与transition类似，keep-alive是一个抽象组件：它本身不呈现DOM元素，也不出现在父组件链中。(因此不会触发已安装和已创建的事件挂钩)

当一个组件被切换到保持活动状态时，其激活和去激活的钩子函数将被相应地执行。

include and exclude

Include(缓存文件)和exclude(非转储文件)属性允许组件有条件地缓存。

！-逗号分隔的字符串-

保持活动包括='a，b '

组件：is=' view '/组件

/保持活力

！-正则表达式(使用“v-bind ”)-

keep-alive :include='/a|b/'

组件：is=' view '/组件

/保持活力

！-数组(使用“v-bind ”)

keep-alive :include='['a '，' b']'

组件：is=' view '/组件

/保持活力

max

可以缓存的组件实例的最大数量。

保持活动状态：max='10 '

组件：is=' view '/组件

/保持活力

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

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