keep-alive缓存组件使用(7)Vue项目设置路由缓存白名单，配合meta

1路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Home1 from '../views/HomeChild1.vue'
import Home2 from '../views/HomeChild2.vue'

Vue.use(VueRouter)
const routes = [{
    path: '/Home',
    name: 'Home',
    components: Home
  },
  {
    path: '/Home1',
    name: 'Home1',
    component: Home1,
    meta: {
      level: 1,
      deepth: 1,
      keepAlive: true
    },
  },
  {
    path: '/Home2',
    name: 'Home2',
    component: Home2,
    meta: {
      level: 1,
      deepth: 0.8,
      keepAlive: true
    },
  },


]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
  console.log(to, from, next)

  next() // 正常跳转到下一页
})
export default router

2 vuex处理  写一个keepalive.js

const keepAlive = {
  state: {
    cachedComponents: []
  },
  mutations: {
    pushComToCache(state, componentName) {
      debugger
      console.log('已缓存当前组件');
      state.cachedComponents.push(componentName)

    },
    deleteComFromCache(state, componentName) {
      console.log('清除上一个缓存组件');
      debugger
      const index = state.cachedComponents.indexOf(componentName)
      index !== -1 && state.cachedComponents.splice(index, 1)
    },

  },
  //getters和组件的computed 类似，方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时，就可以使用 getters 来做
  getters: {
    //如果不要参数的话
    // keepAlive: state => {
    //   return state.keepAlive
    // }
    isCachedComponent: (state) => (componentName) => {
      console.log(state.cachedComponents.includes(componentName));
      debugger
      return state.cachedComponents.includes(componentName)
    }

  },

}
export default keepAlive

引入index.js

import Vue from 'vue'
import Vuex from 'vuex'
 
import keepalive from './keepalive.js'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    namespaced: true, // 为当前模块开启独立的 命名空间
   
    keepalive
  }
})

3 app.vue进行路由监听变化

<template>
  <div class="content-el-array">
    <span> <router-link to="/Home">首页 </router-link> ||</span>
    <span> <router-link to="/Home1">第一页 </router-link> ||</span>
    <span> <router-link to="/Home2">第二页 </router-link> ||</span>

    <keep-alive :include="cachedComponents">
      <!-- 显示需要缓存的组件 -->
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 显示不需要缓存的组件 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Home1",
  data() {
    return {
      include: ["home"],
    };
  },
  computed: {
    ...mapState(["cachedComponents"]),
    ...mapGetters(["isCachedComponent"]),
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      console.log("to.path", to, from);
      // 需要缓存的页面不在缓存数组中,添加白名单，进行缓存
      if (
        to.meta.level === 1 &&
        to.meta.keepAlive &&
        !this.isCachedComponent(to.name)
      ) {
        debugger;
        this.$store.commit("pushComToCache", to.name);
      }
      //根据路由meta信息,清除缓存
      if (
        from.meta.level === 1 &&
        from.meta.keepAlive &&
        to.meta.deepth < from.meta.deepth
      ) {
        debugger;
        this.$store.commit("deleteComFromCache", from.name);
      }
    },
  },

  mounted() {
    debugger;
    console.log(this.$route.meta);
  },
};
</script>
<style scoped lang="scss">
.content-el-array {
  margin: 20px;
  span {
    margin-right: 20px;
  }
}
</style>

两个路由页面各自写一个input，观察数据变化

<template>
  <div style="margin-top: 20px">
    <div>inputVal1： <el-input v-model="inputVal1"></el-input></div>
  </div>
</template>
<script>
export default {
  name: "Home1",
  data() {
    return {
      inputVal1: "",
    };
  },
  methods: {},
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    next();
  },
  //
  beforeRouteLeave(to, from, next) {
    console.log(to, from, next);
    next();
  },
  
};
</script>
<style lang="scss" scoped></style>