本文记录了在Vue开发中遇到的问题：从商品列表页进入详情页后，返回列表页需要保持之前状态。通过使用`keep-alive`组件实现了页面缓存。详细步骤包括在根组件中引入`keep-alive`，在路由配置中指定需要缓存的页面，利用`activated`生命周期钩子更新数据，并处理滚动位置。同时提到了在`beforeRouteLeave`中处理页面离开时的逻辑，以及如何恢复滚动位置。
最近工作中，遇到开发中的问题。从商品列表页，进入商品详情页，之后再返回刚才离开的商品列表页面。解决方法是利用 vue 的keep-alive，https://cn.vuejs.org/v2/api/#keep-alive。虽然使用这个，解决了问题。但是具体原理自己目前也没明白。现在先记录下如何使用的。
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
1 先是根目录下利用keep-alive包裹标签 keep-alive 包裹需要缓存的页面，再单独写一个不需要缓存的页面
<body>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</body>2 在配置路由文件。把keepAlive: true 这个加到需要缓存的路由参数上。不需要缓存的可以不配置
{
path: '',//目录
redirect: '',
meta: {
keepAlive: true // 需要缓存
}
},<
最低0.47元/天 解锁文章
扫一扫
5967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
