开门见山直奔主题
使用keep-alive包裹动态组件时，会缓存不活动的组件实例。
说具体点就是，如果你设定了a界面keep-alive起作用，那么你进入a界面后，生命周期会执行一遍，你离开再进去一次，生命周期并不会再走一遍
应用场景
正常情况下，你从a界面离开去b界面再回到a界面时，a界面应该被刷新了一遍，而如果你设置keep-alive启作用，那么你在a界面的操作就会保留
用法
app.vue中
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
router中
const routes = [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
meta: {
keepAlive: true //需要被缓存
}
}
]
想要更加深入的了解，可以看看引用的相关资料
参考文献：
