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>

2. 在系统的路由管理页面为对应页面的路由添加缓存条件 isKeepAlive: true 如果不需要添加缓存条件的可以将条件改为isKeepAlive: false

                    path: '/user_project_power',
                    component: resolve => require(['../components/page/userMenu/user_projectGroup.vue'], resolve),
                    meta: {
                        title: '用户项目权限',
                        isKeepAlive: true
                    }

image.png