vue 動態保存組件狀態 keep-alive

組件有時候需要保存狀態

1,使用keep-alive把組件包裹起來

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

2,使用動態方式

在路由文件中配置:

{
    path: "/",
    component: () => import("@/views/Home"),
    meta: {
      title: "router.home",
      key: "home",
      keepAlive: true
    }
  },

在代碼中寫入:
每次都判斷路由的配置是否要緩存,如果要就緩存

 <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>