vue路由缓存的三种方式

最新推荐文章于 2025-04-17 19:42:34 发布

.慢慢亦漫漫

最新推荐文章于 2025-04-17 19:42:34 发布

阅读量6.6k

点赞数 1

分类专栏： vue 文章标签：缓存 vue.js javascript

版权

5 篇文章

订阅专栏

本文详细介绍了Vue路由的三种缓存方法：全部缓存，通过`Keep-alive`标签实现；缓存单个指定路由，利用`include`属性指定缓存页面；以及缓存多个指定路由，借助两个`router-view`并结合`meta`属性控制缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Keep-alive标签包裹router-view就可以实现全部缓存

<keep-alive>

  <router-view> </router-view>

</keep-alive>

同样使用Keep-alive标签包裹router-view，在Keep-alive中使用include指定需要缓存的页面的名称即可

<keep-alive include='缓存页面的名称'>

  <router-view> </router-view>

</keep-alive>

需要使用两个router-view两个标签，一个作为缓存的出口一个作为不换缓存的出口，然后在路由配置的时候给缓存的页面加上meta属性，然后设置keepAlive的值

<keep-alive>

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

</keep-alive>

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

{
 path:'/car',

 name:'car',

 component: Car,

 meta: {keepAlive: true} //true缓存 false不缓存
}