vue中keep-alive路由緩存

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

專屬生命周期

activited        keep-alive專屬，組件被激活時調用
deadctivated    keep-alive專屬，組件被銷毀時調用

用於子組件緩存，可以讓子組件緩存還是不緩存

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

網上找的很不錯，

1、直接使用

<keep-alive>
  <component>
    <!-- 該組件將被緩存！ -->
  </component>
</keep-alive>

• include - 字符串或正則表達，只有匹配的組件會被緩存
• exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

  // 組件 a
  export default {
    name: 'a',
    data () {
      return {}
    }
  }

  <keep-alive include="a">
    <component>
      <!-- name 為 a 的組件將被緩存！ -->
    </component>
  </keep-alive>可以保留它的狀態或避免重新渲染

  需要router

  <keep-alive>
      <router-view>
          <!-- 所有路徑匹配到的視圖組件都會被緩存！ -->
      </router-view>
  </keep-alive>

  • 使用 include/exclude
  • 增加 router.meta 屬性

    // 組件 a
    export default {
      name: 'a',
      data () {
        return {}
      }
    }

    <keep-alive include="a">
        <router-view>
            <!-- 只有路徑匹配到的視圖 a 組件會被緩存！ -->
        </router-view>
    </keep-alive>

    增加router屬性

    // routes 配置
    export default [
      {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
          keepAlive: true // 需要被緩存
        }
      }, {
        path: '/:id',
        name: 'edit',
        component: Edit,
        meta: {
          keepAlive: false // 不需要被緩存
        }
      }
    ]    

    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 這里是會被緩存的視圖組件，比如 Home！ -->
        </router-view>
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive">
        <!-- 這里是不被緩存的視圖組件，比如 Edit！ -->
    </router-view>

    分析一個寫的很詳細的地方：很詳細https://www.jianshu.com/p/0b0222954483

  •