vue中如何緩存一些頁面

在vue中，有時候我們只想緩存頁面中的一些組件或頁面，這個時候怎么辦呢，我們就需要用判斷來加載keep-alive。
例如：

// router.js
        {
          path: "/driving_licence",
          component: () => DrivingLicence,
          meta: {
            isShowFooter: true,
            title: "駕照查分"
          }
        },
        {
          name: "ticket",
          path: "/ticket",
          component: () => Ticket,
          meta: {
            isShowFooter: true,
            title: "全國罰單查詢",
            isKeep: true  // 用來記錄當前頁面是否要使用keep-alive
          }
        }

// app.vue
<template>
  <div id="app">
    <!-- 頁面中使用兩個router-view，其中一個使用keep-alive包裹，在給每個加上v-if屬性即可 -->
    <keep-alive>
      <router-view v-if="$route.meta.isKeep"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.isKeep"></router-view>
  </div>
</template>

當引入keep-alive的時候，頁面第一次進入，鈎子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。我們就可以在不同的鈎子函數內執行相關操作。