分类：缓存页面

2021
02-21

如何管理Vue中的缓存页面

<keep-alive><router-view/></keep-alive>Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时，通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面)，显著提高页面二次访问速度，但是也给我们在某些场景带来了困扰，其中包含两个主要矛盾：缓存页面如何在合适的时机被销毁（keep-alive组件提供了三个参数来动态配置缓存状态，但是作用有限，后面分析）同一个路径如何缓存多个不同的页面(同页不同参)，比如... 继续阅读 >

2020
10-08

keep-Alive搭配vue-router实现缓存页面效果的示例代码

Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现，keep-alive组件可以使被包含的组件保留状态，或避免重新渲染。在routes.js中定义路由，在路由中定义元信息(meta字段)，需要缓存的页面就需要在meta对象中定义一个字段，这里设置为keepAlive，设置为true，反之，则不缓存。{path:'/a',component:()=>import('@/pages/A'),meta:{title:'A',keepAlive:true}},{path:'/b',component:... 继续阅读 >