在路线导航中缓存道具

Question

我在每个视图中都使用这些道具来绘制面包屑。它们将被传递给$router.push的呼叫。

  props: {
    id: {
      type: [Number, String],
      default: null
    },
    parentArea: {
      type: Object,
      default: null
    },
    parentSector: {
      type: Object,
      default: null
    }
  },
  computed: {
    items () {

      let list = [{
        to: {
          name: 'home'
        },
        text: "Inicio"
      }];

      if (this.parentArea) {
        list.push({
          to: {
            name: "gran_area",
            params: {
              id: this.parentArea.id
            }
          },
          text: `Gran área ${this.parentArea.id}: ${this.parentArea.descripcion}`
        })
      }

      if (this.parentSector) {
        list.push({
          to: {
            name: "area",
            params: {
              id: this.parentSector.id,
              parentArea: this.parentArea
            }
          },
          text: `Área ${this.parentSector.id}: ${this.parentSector.descripcion}`
        })
      }

      list.push({
        to: {
          name: 'disciplina',
          params: this.$route.params,
          parentArea: this.parentArea,
          parentSector: this.parentSector
        },
        text: 'Disciplina',
        active: true
      })

      return list
    }
  },

但是，如果我尝试缓存每个视图：

  <div id="app">
    <app-header></app-header>
    <main class="main" role="main">
      <transition name="fade" mode="out-in">
        <keep-alive include="breadcrumb">
          <router-view :key="$route.fullPath"></router-view>
        </keep-alive>
      </transition>
    </main>
    <app-footer></app-footer>
  </div>

每次在视图之间移动时，items都会重新计算，并且由于看不到导航中的所有内容，因此丢失了面包屑状态。

是否可以避免此问题并完全保留状态？