keep-alive 参数

  • include数据格式:[‘a’,’b’] a页面b页面需要缓存 对应页面的name名称
  1. export default {
  2.   name: "a",
  3. }

keep-alive 对路由页面进行缓存;

  • vue2写法

    1. <keep-alive :include='keepAlive'>
    2.   <router-view></router-view>
    3. </keep-alive>

  • vue3 router-view写在最外面

    1. <router-view v-slot="{ Component }">
    2.  <keep-alive :include='keepAlive'>
    3.      <component :is="Component" />
    4.  </keep-alive>
    5. </router-view>
  1. import { ref,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'
  2. import { useStore } from 'vuex'
  3. export default ({
  4.     setup(){
  5.          /* 获取挂在到vue实例上的api element-plus实例*/
  6.          var $this = getCurrentInstance().appContext.config.globalProperties;
  7.          //返回store的实例  响应式数据只有state
  8.          var store = useStore();
  10.          let keepAlive = computed(()=>{
  11.              return store.state.user.keep_alive;
  12.          });
  13.         return{
  14.             keepAlive
  15.         }
  16.     }
  18. })
  • 但是有时候有的页面需要缓存，不想每次切换路由的时候在发起请求重新加载，这个涉及到我们的路由元信息
  • vuex commit提交当前需要缓存的页面name名称
  • histPub页面需要缓存
  1. store.commit("SET_KEEP_ALIVE", "histPub");
  • vuex代码
  1. state: {
  2.      /* 路由对name页面的缓存 */
  3.      keep_alive:[],
  4.  },
  5.  mutations: {
  6.    SET_KEEP_ALIVE: (state, keepAlive) => {
  7.        state.keep_alive = keepAlive
  8.    },
  9. }
  • 当前页面缓存后跳到详情页面当前页缓存但是切换其余路由数据会一直缓存
  • 判断当前页面离开的时候是否是详情页、不是的话清除缓存页面name
  • onBeforeRouteLeave (vue3的生命周期函数 需要import) beforeRouteLeave (vue2的生命周期 可直接使用)
  1. /*离开当前路由 不是指定页面则清除当前页面缓存*/
  2. import { onBeforeRouteLeave  } from 'vue-router'
  3. onBeforeRouteLeave((to, from, next)=>{
  4.     if(to.path !='/histView'){
  5.         store.commit('SET_KEEP_ALIVE','');
  6.     }
  7.     next();
  8. });