Vue中使用router.meta.keepAlive对页面进行缓存

添加页面缓存

src/App.vue
使用keep-alive组件包裹，则再次进入页面时，会使用缓存中的组件，不会重新渲染（不再执行mounted及之前的生命周期中的代码），用于保存组件的原始状态（所有变量的值保持最终状态不变）

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

清除页面缓存

将 src/App.vue 中改为

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