作用:页面缓存
最近做项目遇到这样的需求,点击列表进去详情页面,返回回来需要保持列表页的滚动条的深度,查阅文档发现vue
里面有对“页面缓存的处理方法”,就是keep-alive
通常在Vue
构建的单页面应用(SPA)中,路由模块一般使用vue-router
。vue-router
不保存被切换组件的状态,它进行push
或者replace
时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期
使用方法
keep-alive
是个抽象组件,实际上不会被渲染在DOM
树中。它的作用是在内存中缓存组件(不让组件销毁),等到下次再渲染的时候,还会保持其中的所有状态,并且会触发activated
钩子函数。因为缓存的需要通常出现在页面切换时,所以常与router-view
一起出现(参考,vue
官方文档)
<keep-alive>
<router-view