Vue 路由组件缓存

Vue Router中，开启路由组件缓存可以使用<keep-alive>将<router-view>包裹起来。使用了<keep-alive>之后，路由组件被用户切换掉时，不会被销毁。

<keep-alive>
  <router-view></router-view>
</keep-alive>

<keep-alive>默认会缓存当前在<router-view>中展示的所有组件。如果要指定缓存的组件，可以使用include。在include中指定要缓存的组件的名称即可。

例如：

<keep-alive include="Home">
  <router-view></router-view>
</keep-alive>

如果要指定缓存多个组件，可以使用v-bind：

<keep-alive :include="['Home', 'About']">
  <router-view></router-view>
</keep-alive>

版权