vue项目中给路由添加缓存配置

<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      title: document.title,
      include: [],
    };
  },
  watch: {
    $route(to, from) {
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        let index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    },
  },
  created() {},
  methods: {},
};
</script>

在router.js中设置

  {
    path: 'a/b',
    name: 'b',
    component: b,
    meta: {
      deepth: 1,
      keepAlive: true
    }
  },