Elmentui使用keep-alive动态缓存页面

keep-alive实现缓存

keep-alive是vue提供的一个组件方法

<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

缓存页面，返回不刷新，这里只缓存meta中keepAlive的值为true的页面

在路由的index.js中 将其meta属性加入keepAlive，希望缓存的页面加入vue属性即可

{
   path: '/man',
   component: Index,
   meta: { keepAlive: true }}
}

但是 这还是不满足于书签的需求 当其书签页取消后 再进入路由 数据没有被清空
当需要动态设置是否缓存时 可以用vue新增的两个属性inlcude/exclude

动态设置缓存include/exclude属性

需要注意的是include/exclude绑定的属性是页面中设置的name值 而不是路由中的name值
基础使用方法

<keep-alive include="Main">
      <router-view ></router-view>
</keep-alive>

export default {
   name：'Main'
  data(){
      return{}
   }
}

当在实际项目中 可以运用vuex保存你需要缓存的页面的name值（如果是利用router-link跳转可以在route.js的meta中设置name值 在跳转时可以获取到）

import Vue from "vue";
import Vuex from "vuex";
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state: {
        keepAlive: []
    },
    mutations: {
        setKeepAlive: (state, keepAlive) => {
            state.keepAlive = keepAlive;
        }
    },
    getters: {
        keepAlive: state => state.keepAlive
    }

在vue页面上加入keepalive动态判断

<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>