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>