透過 `meta.keepAlive` 來控制該 route 的 component 是否要做 cache (keep alive) `App.vue` ``` <RouterView v-slot="{ Component }"> <KeepAlive> <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive" /> </KeepAlive> <component :is="Component" v-if="!$route.meta.keepAlive" /> </RouterView> ``` `router/index.js` ``` const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/board', name: 'Board', component: BoardView, meta: { keepAlive: true } } ]; ``` Reference: - https://www.reddit.com/r/vuejs/comments/1cqyjks/how_to_keep_components_from_reloading_with/ - https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/vue-%E8%81%B0%E6%98%8E%E4%BD%BF%E7%94%A8-keep-alive-%E9%81%94%E5%88%B0-cache-%E7%9B%AE%E7%9A%84-691cfb3c8bf0 - https://www.cnblogs.com/steamed-twisted-roll/p/17013186.html