用vue做后台管理项目,特别是有列表页,列表数据详情页,列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,有时候需要保存组件状态,
要求:
1。列表页进入详情页返回列表页时列表不能刷新,连页数,筛选条件等都不能变
2。列表页进列表数据编辑页若数据有改动返回列表页列表数据得刷新,但页数,筛选条件等都不能变
3。非详情页,编辑页进入列表页时列表数据得刷新,页数,筛选条件等都全部重置
总结一下就是“这个列表页我想让它刷新,他就得刷新,不想让他刷,他就无变化
那么是啥呢?对,是维生组件,对,是它。
但单纯的维生是前进后退都不会刷新的,所以需要改造一下,让它乖乖听话。这个过程需要路由路由参数元配合我们。
1。在路由文件中为目标列表页设置元参数,里面包含keepAlive和ifDoFresh字段
复制代码
{
路径:“*”,
名称:“datalist”,
组件:解决=比;要求([' @/视图/datalist '],解决),
元:{
keepAlive:真的,
ifDoFresh:假
}
},
复制代码
2。在程序主入口main.vue中设置页面根据keepAlive字段判断是否使用点火电极组件。
复制代码
& lt; div类=癿ain"在
& lt; keep-alive>
& lt; router-view v=皉oute.meta.keepAlive"美元/祝辞
& lt;/keep-alive>
& lt; router-view v=? route.meta.keepAlive"美元/祝辞
& lt;/div>
复制代码
3。在目标列表页的beforeRouteEnter方法中判断页面进入方式(详情页,编辑页或其他方式),根据需求将路由参数的ifDoFresh字段设为true/false,
在页面的激活(开启了keepAlive:真正的页面在第二次进入时是无法触发安装发法的)方法中根据ifDoFresh字段判断是否刷新页面。
复制代码
beforeRouteEnter(下),从{
如果(from.name !=跋昵橐场?和from.name !=氨嗉场?
{
to.meta。ifDoFresh=true;
}
next ();
},
激活(){
//开启了keepAlive:正确后再次进入,以前的搜索条件和页数都不会变,无论什么情况都调用一下获取数据的接口,这样就能得到当前搜索条件和页数的最新数据
如果(这一点。route.meta.ifDoFresh美元){
//重置ifDoFresh
route.meta美元。ifDoFresh=false;
//获取列表数据方法第一参数为是否重置搜索条件和页数
this.getData(真正);其他
} {
this.getData ();
}
}
完结!
