https://www.cnblogs.com/growupup/p/10001623.html
一、解释:
列表页( list ): 比如订单列表, 可以是按时间倒序的列表、也可能是根据一些条件查询出的一页订单数据
详情页( view ): 只读的,仅仅用来查看一下详情的页面
编辑页( detail ): 可以对对象整体或者部分进行修改的页面
二、需求:
1. 列表页( list ) 进入详情页( view ),再返回列表页( list )时,列表页( list )不能刷新,连页数、筛选条件等都不能变,完全保持原样
2. 列表页( list ) 进入编辑页( detail )后,若数据有改动,返回列表页( list ) 时,刷新该条数据,但页数、筛选条件等都不能变
3. 其他非详情页、编辑页进入该列表页时
a)有一些情况,需要列表数据刷新,页数、筛选条件等都全部重置
b)有一些情况,不需要列表数据刷新,完全保持之前的样子
--------------------------------------------------
三、使用keep-alive后,组件的生命周期执行顺序
第一次进入keep-alive组件时,其生命周期执行顺序:
前一个组件中的beforeRouteLeave --> 全局beforeEach --> 将到达组件的 beforeRouteEnter --> created --> mounted --> activated
非首次进入时,其生命周期执行顺序:
前一个组件中的beforeRouteLeave --> 全局beforeEach --> 将到达组件的 beforeRouteEnter -->activated
四、实现步骤
1、路由定义,加上meta, 比如:
{
path:'*',
name:'datalist',
component: resolve => require(['@/view/datalist'], resolve),
meta:{
keepAlive: true, //是否使用keep-alive
ifDoFresh:false //是否刷新
}
},
2、在程序主入口main.vue中设置页面根据keepAlive字段判断是否使用keep-alive组件。
<div class="main">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</div>
3、在列表页的beforeRouteEnter方法中,根据from.name识别上一个组件, 根据来源的不同,将ifDoFresh字段设为true/false,
beforeRouteEnter (to, from, next) {
if(from.name!='详情页'&&from.name!='编辑页')
{
to.meta.ifDoFresh = true;
}
next();
},
4、在组件的activated方法中根据ifDoFresh字段判断是否刷新页面。
activated(){
if(this.$route.meta.ifDoFresh){
this.$route.meta.ifDoFresh = false;//重置ifDoFresh
//执行刷新操作
}
}