项目为VUE项目,需求是当频繁切换两个界面时候,接口不重复调用,即界面不刷新。
例如:列表 -》详情A -》列表 -》详情A,这样频繁切换不会重复去调用接口与刷新界面。
但是如果是 列表 -》详情A -》列表 -》详情B ,这个时候详情就需要根据列表传递过来得id或者其他参数进行调用接口,
详情A B,是同一个界面,但是数据不一样,界面展示不一样。
这是根视图,home中得写法
<transition name="fade-transform" mode="out-in">
<keep-alive>
<router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
<router-view class="router-view" v-if="!$route.meta.keepAlive"></router-view>
</transition>
在根试图中添加 keep-alive与路由中keepAlive结合使用,可以选择是否刷新,
下面是路由写法
{
path: 'list',
name: 'ssmListScreenQuery',
component: () => import('../list/seeCase.vue'),
meta: { title: '列表', keepAlive: true, icon: 'el-icon-document' },
},
{
path: 'list/caseDetail',
name: 'case-detail',
component: () => import('../list/caseDetail.vue'),
meta: { title: '详情', keepAlive: true, icon: 'el-icon-refresh' },
},
完成这个基本上就实现了,列表 -》详情A -》列表 -》详情A不刷新不请求接口问题
但是难点就是列表 -》详情A -》列表 -》详情B 详情什么时候刷新什么时候不刷新,
按照目前代码,当跳转到详情B时候,显示得是A的数据,
由列表进详情传递得有一个id值,这个时候路由地址中传参是不一样的,但是界面显示得是第一次进来缓存得样式及数据。
目前想到的思路就是在单个vue文件中加监听事件,来判断是否刷新与调用,但是这样改造起来太麻烦了,
项目已经开发完了,是优化,不建议修改单个文件,
所以请问各位大佬
有没有能在根试图中添加什么东西,来判断是否要刷新?
满足我得需求
用生命周期钩子函数onactivated,在函数里面根据路由参数判断是否请求接口