vue关于keep-alive,你可能不知道的

259 阅读1分钟

keep-alive可以保存包裹中的路由的上一次历史状态,切换时有两个重要钩子函数:activated、deactivated。

当切换回来的时候,会触发activated钩子函数。所以可以进行一系列操作,例如常用的页面滚轮置顶:scrollTop为0

但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面,这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果,所以需要我们在特定的情况下强制刷新某些组件
<keep-alive include="aa,bb">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="cc">
      <router-view></router-view>
</keep-alive>
include表示组件名为aa、bb的组件才会被缓存,exclude表示组件名为cc的不会被缓存

当然也可以利用meta熟悉来进行选择性缓存

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]