keep-alive
keep-alive是什么
-
它是一个加载非动态组件的一个组件,使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
它里面有三个属性一个是include另一个是exclude属性还有一个max
1.include是被keep-alive中加上include的标签包裹住的组件会被缓存的。
2.exclude是被keep-alive中加上exclude的标签包裹住的组件不会被缓存的。
3.max是定义缓存组件上限。
代码的作用
应用场景1
代码实现
1.keep-alive缓存不活动的组件
1.创建两个组件
一个写个input框和一个按钮
<button> 切换组件 </button>
<div>
<keep-alive>
<input/>//里面写上几个数值
</keep-alive>
</div>
另一个是个空白组件就是做切换效果的
它的效果:是你点击按钮来回切换你写的那几个数值还在input框里
注意:一般情况下组件进行切换的时候,会被默认销毁,如果有需要不让组件销毁就可以用keep-alive来缓存一下
应用场景2
代码实现
1.keep-alive缓存不活动的组件
1.创建一个组件
一个写个input框和一个按钮
<button> 切换组件 </button>
<div>
<keep-alive>
<一个组件 加个判断 true>
</keep-alive>
<同一个组件 加个判断 false>
</div>
export default {
name:"Curriculum",
data() {
return {
写个变量:true
}
}
}
它的效果:它是根据判断变量为true还是为false,true的话用keep-alive包裹的组件false的话用keep-alive以外的组件
应用场景3
-
可以用keep-alive来实现返回上级不刷新的效果
1.app.vue <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 除了需要缓存的路由 还要创建一个非缓存路由的入口-->
<router-view v-if="!$route.meta.keepAlive"></router-view>
2.配置路由的地方配置全局keep-alive
复制代码
{
path: "/funGoodsArea",
name: "funGoodsArea",
component: () => import("../views/activity/funGoodsArea.vue"),
meta: {
title: "text",
keepAlive: true
}
},
3.在B的页面配置 beforeRouterLeave ,其中funGoodsArea的路由
//修改列表页的meta值,false时再次进入页面会重新请求数据。
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
4.同样在C页面中配置
复制代码
// 返回上一页路由不刷新问题
beforeRouteLeave (to, from, next) {
if (to.path == "/funGoodsArea") {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
},