vue页面缓存

  • 前言：在一个系统的各个页面间切换如果没设置缓存页面会导致重复请求数据，从而页面不够流畅导致用户体验感变差。

  • 实现

  1. 在系统的主体页面，为需要添加缓存的页面添加 <keep-alive> </keep-alive> 组件，用来判断页面路由是否添加了缓存v-if="$route.meta.isKeepAlive" 
      <div class="content">
        <transition name="move" mode="out-in">
          <keep-alive>
            <router-view v-if="$route.meta.isKeepAlive"></router-view>
          </keep-alive>
        </transition>
            <transition name="move" mode="out-in">
          <router-view v-if="!$route.meta.isKeepAlive"></router-view>
        </transition>
      </div>
  1. 在系统的路由管理页面为对应页面的路由添加缓存条件 isKeepAlive: true 如果不需要添加缓存条件的可以将条件改为isKeepAlive: false 
                    path: '/user_project_power',
                    component: resolve => require(['../components/page/userMenu/user_projectGroup.vue'], resolve),
                    meta: {
                        title: '用户项目权限',
                        isKeepAlive: true
                    }
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容