vue-router中的keep-alive组件

最新推荐文章于 2024-04-13 11:29:57 发布

coderXRW

最新推荐文章于 2024-04-13 11:29:57 发布

阅读量4.5k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42282727/article/details/107500460

版权

本文详细介绍了vue-router中keep-alive组件的使用，包括如何缓存组件、如何控制缓存策略，以及解决组件状态保留和路径控制的问题。讲解了include、exclude属性、max限制、组件生命周期钩子，并提到了scrollBehavior方法和 vuex 在缓存管理中的应用，同时讨论了路由参数变化的响应方式。

摘要由CSDN通过智能技术生成

vue-router中keepalive缓存的知识补充

这个keep-alive是vue内置的一个组件，如果你希望一些组件不被反复的被渲染刷新，就可以使用<keep-alive></keep-alive>将组件包裹起来，被包裹起来的组件会被缓存起来，保存这个组件的状态，当你再次访问该组件，会直接从缓存中读取内容，该组件不会被重新渲染。
```
//keepalive包含的组件会被进行缓存
<keep-alive>
  <component />
</keep-alive>
```

要是我们希望某些组件不被缓存，有些被缓存呢？

这里用到了几个属性来解决：

include：包含组件
exclude：排除的组件

max：缓存组件最大值

对组件的缓存：

//只缓存组件name为a或者b的组件
<keep-alive include="a,b">
 <component :is="currentView"/>
</keep-alive>

//组件名为c的组件不缓存
<keep-alive exclude="c">
 <component :is="currentView"/>
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件
<keep-alive include="a,b" exclude="b">
 <component :is="currentView"/>
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5">
 <component :is="currentView"/>
<

最低0.47元/天解锁文章