1、keep-alive的作用是缓存组件,避免多次加载相应的组件,减少性能的消耗
2、keep-alive: 被缓存的页面生命周期是怎么执行的?
第一次进入会正常执行从beforeCreate函数开始;
之后的进入只会执行activted/deactivated两个函数
3、使用
<template>
//这样是缓存所有的组件,
<template>
<div id="app">
<keep-alive >
<router-view></router-view>
</keep-alive>
<tabBar/>
</div>
</template>
</template>
缓存部分页面
<template>
//这种方式是缓存一部分页面
<div id="app">
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<tabBar/>
</div>
</template>
{
path: '/usermanage',
name: 'usermanage',
meta: {
keepAlive: true, //该字段表示该页面需要缓存
},
component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
},
注: meta是自定义的属性,在里面定义一些初始值,通过这些值来进行一些操作,用来做校验最合适不过了
例子: 从其他页面跳转到此页面需要请求数据,当从下级页面返回时这个页面时就不会进行数据请求
{
path: '/usermanage',
name: 'usermanage',
meta: {
keepAlive: true, //该字段表示该页面需要缓存
isBack: false, //用于判断上一个页面是哪
},
component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
},
<script>
export default {
name: 'currentName',
data() {
return {
isFirstEnter: false, //初始值设置为false是因为如果keep-alive的第一次进入会执行created函数,而之后不会执行
}
},
beforeRouteEnter(to, from, next) {
if (from.name == 'nextName') { // 这个name是下一级页面的路由name
to.meta.isBack = true; // 设置为true说明你是返回到这个页面,而不是通过跳转从其他页面进入到这个页面
}
next()
},
created:{
this.isFirstEnter = true
},
activated() {
if (!this.$route.meta.isBack || this.isFirstEnter) {
this.getDataFn() // 这里发起数据请求,(之前是放在created或者mounted中,现在只需要放在这里就好了,不需要再在created或者mounted中请求!!)
}
this.$route.meta.isBack = false //请求完后进行初始化
this.isFirstEnter = false;//请求完后进行初始化
},
}
</script>