Vue中keep-alive:订单页跳转详情页,返回后停留原位置。

发布网友发布时间：2024-09-29 21:52

共1个回答

热心网友时间：2024-10-27 17:28

在Vue项目开发中，为提升用户体验，尤其是在订单列表页与详情页间频繁跳转时，遇到的一个常见问题是页面重载导致滚动位置丢失。为解决这个问题，可以利用Vue的keep-alive组件实现缓存功能。keep-alive是一个智能组件，它能缓存动态加载的组件，避免页面每次返回时重新渲染和数据加载。

keep-alive的使用关键在于include和exclude属性。include用于指定要缓存的组件名称数组，而exclude则用于排除不希望缓存的组件。然而，如果页面众多，逐个添加组件名称会显得繁琐。此时，利用路由的meta属性来标记需要缓存的页面更为便捷，这样可以根据实际需求动态控制缓存。

在具体场景中，比如订单列表页A和订单详情页B之间，我们只希望从B返回A时保持缓存，因为其他页面可能已经改变了列表状态，需要重新加载数据。因此，我们需要在beforeRouteEnter和beforeRouteLeave路由守卫函数中，动态设置$route.meta.keepAlive的值，以实现这一目标。

以下是代码示例，涉及的组件包括orderInfoList.vue和orderInfoDetail.vue：

这样，当用户从订单详情页返回订单列表页时，页面状态将被保持，滚动位置得以保留，提升用户交互的流畅度。