vue 路由跳转保留页面缓存和滚动位置

最新推荐文章于 2025-03-20 21:04:54 发布

多思考多学习

最新推荐文章于 2025-03-20 21:04:54 发布

阅读量4k

点赞数 6

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45753961/article/details/117516941

版权

本文介绍了在Vue应用中如何实现页面跳转后保留页面缓存和滚动位置。通过在app.vue设置缓存机制，结合router.js中的路由离开事件判断，以及在组件的activated方法中恢复滚动位置，确保从b页面返回a页面时，a页面的状态得到保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：

在a页面滑动列表，点击进入b页面，再返回a页面时，a页面保留滑动的位置和页面缓存。

解决思路：

使用路由的keepAlive方法，keepAlive为true就会保留页面缓存。（返回该页面不会执行created和mounted)。

app.vue使用缓存机制。
a页面跳转到b页面时，设置a页面的keepAlive为true、保存页面滚动高度。
路由守卫判断去的页面不是b页面就将keepAlive改为false，防止别的页面跳转到a页面还有缓存。
在activated恢复页面滚动高度。

解决方法：

1.app.vue。使用缓存机制。

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view  v-if="!$route.meta.keepAlive">
     <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
    </router-view>
  <