vue-router--keep-alive遇见vue-router

·  阅读 309

keep-alive是什么

keep-alive是Vue内部的一个组件,这个组件能让在它内部的组件一直“活着”,会将他们缓存起来,不会被销毁,下次如果再用到他们直接去缓存中取。

没有keep-alive的router-view

当我们没有keep-alive的router-view,情况是这样的,举个例子:'/home'->'/about',实际上是做了两个操作。

  • 销毁home组件
  • 创建了about组件

如果我们在home组件之前有些修改,那么就不会保存下来。因为切换回来的时候home组件是重新创建的。这里我写了一个小栗子,我home组件里可以通过点击改变字体颜色: 看看当我切换的时候会不会保存我切换的颜色: 应该也好理解,他重新创建了home组件,data中的color变量又变成了'red'

有keep-alive的router-view

由于keep-alive的特性,会使router-view一直活着,被缓存起来,**也就是说任何替换router-view的组件都不会被销毁!**而只是进入不活跃状态。那这时候,我们加上keep-alive再看看上个需求实现了嘛 perfect!

keep-alive衍生物

  • activated 这是一个类似生命周期函数的钩子,意思是进入活跃状态,当组件进入活跃状态的时候被调用。
  • deactivated 这是另一个相对的钩子,意思是进入不活跃状态,当组件进入不活跃状态的时候被调用。
  • 请注意,以上两个钩子只有被keep-alive包裹的组件才存在。一般组件是不存在的,毕竟,只有keep-alive中的组件才会存在活跃和不活跃,其他组件只存在生存还是毁灭。
  • keep-alive组件还有两个属性,一个是include,一个是exclude。有可能我们并不需要keep-alive中所有组件的状态都被缓存,比如这里我只想缓存home组件的状态。那我可以使用include属性,属性值是什么呢?是组件的name属性那么代码应该是这样的:<keep-alive include="Home"> <router-view/> </keep-alive>,那么其他组件状态就不会被缓存。如果我的需求是我不希望about组件的状态被记忆,那么代码应该是<keep-alive exclude="about"> <router-view/> </keep-alive>
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改