Vue动态缓存页面

Bertha 。 2023-02-22 03:50 33阅读 0赞

## 原理通过keep-alive标签的include属性及vuex完成 ##

**需求说明：A页面到B页面需要缓存，A页面到C页面不需要缓存**

***所要缓存页面的顶级出口***

<keep-alive :include="kpAlive">
        <router-view/>
    </keep-alive>
    
    <script> export default { computed: { /** * router-alive */ kpAlive() { return this.$store.getters.kpAliveRouter; } } } </script>

***store***

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

***所要缓存的页面A***

**tips：**  
**1.此处的A为页面中name的值，不为route的name**  
**2.如果没有达到缓存A页面效果，则需要检查A页面是否在二级（多级）的keep-alive中，如是则需要同时缓存这些层级页面**