概述
一、基本使用需求：有两个页面（A 和 B），当我们在页面A的table列表中点击查看详情按钮，跳转到B页面，在B页面点击返回时，要定位到之前A的列表位置， 不能刷新该页面。在 <router-view /> 的外层包一个 keep-alive 如：<keep-alive include="pageA"> <router-view /></keep-alive>其中 include 为要缓存的页面，如果有多个页面可用逗号隔开，pageA为.，下方主要介绍关于keep-alive 使用的全文内容，希望对你有所帮助。一、基本使用
需求：有两个页面（A 和 B），当我们在页面A的table列表中点击查看详情按钮，跳转到B页面，在B页面点击返回时，要定位到之前A的列表位置， 不能刷新该页面。
在 <router-vIEw /> 的外层包一个 keep-alive 如：
<keep-alive include="pageA">
<router-vIEw />
</keep-alive>其中 include 为要缓存的页面，如果有多个页面可用逗号隔开，pageA为页面A的name值，如
export default {
name: "pageA",data () {
return {}
}
}这样的话，页面在跳转到 A 页面时，会缓存之前的数据，页面不会重新加载。
二、自定义刷新使用
在使用 keep-alive 之前，先看下生命周期执行顺序：
1、不使用keep-alive时：beforeRouteEnter -> created -> mounted -> destroyed
2、使用keep-alive时：beforeRouteEnter -> created -> mounted -> activated -> deactivated
注：created，只有第一次进入或者刷新页面后才会执行此钩子函数，使用keep-alive后（2+n次）进入不会再执行此钩子函数
需求：有A、B、C三个页面，A、C为项目的一级目录页（也就是左侧的menu菜单），B为详情页。现在是想在页面A点击详情按钮跳转到页面B，再从页面B点击返回按钮回到页面A时，页面A数据不能重新加载刷新，但是从左侧目录页面C中跳转到页面A的话需要刷新。代码如下：
1、首先在路由pageA的Meta中添加是否缓存的标识 如：isKeepAlive,默认为 true;
2、在router-vIEw 中加入 keep-alive ， 设置 include ，指定缓存页面 A，用iskeepAlive判断是否是缓存，选择对应的router-vIEw
<span>
<keep-alive include="pageA">
<router-vIEw :key="key" v-if="$route.Meta.iskeepAlive" />
</keep-alive>
<router-vIEw :key="key" v-if="!$route.Meta.iskeepAlive" />
</span>3、在页面A中的name属性赋值 pageA，和keep-alive中的include 一致 ，如：
export default {
name: "pageA",data () {
return {}
}, beforeRouteEnter(to, from, next) { //进来时判断
if (from.Meta.Title == "pageB") { //判断是否是从详情B页面返回到A页面
to.Meta.iskeepAlive = true; //是的话则缓存
}
next();
}, beforeRouteLeave(to, next) { //离开时判断
if (to.Meta.Title== "pageB") { //如果是去详情B页面,则返回时要缓存
from.Meta.iskeepAlive = true;
} else { // 去C页面或者其他页面则 不缓存
from.Meta.iskeepAlive = false;
}
next();
},}总结
以上是编程之家为你收集整理的keep-alive 使用全部内容，希望文章能够帮你解决keep-alive 使用所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
