项目总结：vue页面控制缓存 整个流程

场景

在vue项目中，有的页面需要缓存，有的页面不需要缓存，有的页面在某种状态需要缓存，其他状态不需要缓存。

vue缓存 keep-alive

在我们项目中我们缓存组件来优化页面性能用keep-alive来进行解决

控制页面是否缓存

方法一 （默认全部缓存）

在路由中meta属性增加keepAlive 为true和false来进行判断
<keep-alive>
      <router-view :key="key" v-if="$route.meta.keepAlive" />
    </keep-alive>
<router-view :key="key" v-if="!$route.meta.keepAlive" />

页面中条件判断 例如: 去A页面不再缓存

beforeRouteLeave(to,form,next){
if(to.name==='A')
//改变meta中keepAlive的值
to.meta.keepAlive = false;
}}

例如：页面如果一直不需要缓存

 beforeRouteEnter(to, from, next) {
 	// 当前页面一直不缓存
    to.meta.keepAlive = false;
    !(to.fullPath === from.fullPath) &&
      sessionStorage.setItem("fromPath", from.fullPath);
    next();
  }

方法二

利用include 进行缓存页面include里面值为组件的name值

  <template>
  <div class="app">
    <keep-alive :include="keepAlive" >
      <router-view/>
    </keep-alive>
  </div>
</template>

<script type='text/javascript'>
export default {
  data () {
    return {}
  },
  computed: {
    keepAlive () {
      return this.$store.getters.keepAlive
    }
  }
}
</script>
    // 利用vuex进行cacheViews的状态管理 其他思路于方法一一致

注：exclude 为不缓存的组件name值