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>