Vue3路由缓存
路由缓存
一个令人头疼的问题是，当路由后退或原地刷新时，组件的生命周期会被重新触发，即可能导致生命周期钩子中加载数据的函数被触发，为了避免这种情况，可以利用Vue-Router的路由缓存机制。以一个文章列表为例，假设你点击了一篇文章进行阅读，并希望返回时不要重载数据或触发生命周期钩子，你可以在router配置中，为文章列表页面的meta选项加上keepAlive属性，并设置为true：
{
path : '/articleList',
name : 'articleList',
component: ()=>import('@/view/article/ArticleListView.vue'),
meta: { keepAlive:true } // 此处添加
}
这样就完成了对文章列表页面的缓存。如果你需要为其他页面进行缓存，则可以按需为其路由配置keepAlive属性
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
