收藏
回答

VUE中组件缓存keepalive与routerView结合实现缓存界面后如何刷新?


项目为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'列表'keepAlivetrueicon'el-icon-document' },
  },
  {
    path'list/caseDetail',
    name'case-detail',
    component() => import('../list/caseDetail.vue'),
    meta: { title'详情'keepAlivetrueicon'el-icon-refresh' },
  },
完成这个基本上就实现了,列表 -》详情A -》列表 -》详情A不刷新不请求接口问题
但是难点就是列表 -》详情A -》列表 -》详情B 详情什么时候刷新什么时候不刷新,
按照目前代码,当跳转到详情B时候,显示得是A的数据,
由列表进详情传递得有一个id值,这个时候路由地址中传参是不一样的,但是界面显示得是第一次进来缓存得样式及数据。
目前想到的思路就是在单个vue文件中加监听事件,来判断是否刷新与调用,但是这样改造起来太麻烦了,
项目已经开发完了,是优化,不建议修改单个文件,
所以请问各位大佬
有没有能在根试图中添加什么东西,来判断是否要刷新?
满足我得需求
回答关注问题邀请回答
收藏

1 个回答

  • 神经蛙
    神经蛙
    2022-02-18

    用生命周期钩子函数onactivated,在函数里面根据路由参数判断是否请求接口

    2022-02-18
    有用
    回复
登录 后发表内容