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

1<keep-alive>
2  <router-view></router-view>
3</keep-alive>

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

例如:

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

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

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