vue中前进刷新、后退缓存用户浏览数据和浏览位置

最新推荐文章于 2025-04-21 15:51:30 发布

Tian_____

最新推荐文章于 2025-04-21 15:51:30 发布

阅读量459

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Tian_____/article/details/103968273

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在Vue应用中如何利用`keep-alive`组件进行页面缓存，以实现在前进操作时刷新数据，后退操作时保留用户浏览数据和位置。通过在`app.vue`中引入`keep-alive`，并在路由配置中设置`meta`信息，可以控制哪些组件需要被缓存。在组件生命周期钩子中，如`beforeRouteLeave`，可以判断并处理缓存数据。此外，缓存页面会保持滚动条位置，若需返回顶部，需额外处理。

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

keep-alive的使用

1.首先在我们的app.vue中定义keep-alive

<keep-alive>      
    <router-view v-if="$route.meta.keepAlive"/>    
</keep-alive>    
<router-view v-if="!$route.meta.keepAlive"/>

2.在router/index.js即我们的路由文件中，定义meta信息(因为keepAlive是自己定义在meta中的)

// list是我们的搜索结果页面
{      
    path: '/list',  
    name: 'List',      
    component: resolve => require(['@/pages/list'], resolve),    
    meta: {        
        isUseCache: false,  // 用来判断是否需要使用缓存数据      
        keepAlive: true  // 通过此字段判断是否需要缓存当前组件  
    }    
},

刷新数据or缓存数据的实现

1.与缓存相关的钩子函数

设置了keepAlive缓存的组件：
第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated
后续进入时：beforeRouterEnter ->activated->deactivated

// list组价的activated钩子
activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是我们获取数据的函数
    } 
    this.$route.meta.isUseCache = false;
},

由于我们只要列表到详情页的时候缓存列表页的数据，所以我们要在列表页的beforeRouteLeave的钩子判断，如果前往的是详情页面，则缓存数据：

// 列表页面的beforeRouteLeave钩子函数
beforeRouteLeave (to, from, next) {        
    if (to.name == 'Detail') {
        from.meta.isUseCache = true;    
    }        
    next();
},

3.注意，缓存页面是会保存返回前页面的滚动条位置，如果需要返回顶部，则在router中定义方法

routes: [    
    {      
        path: '/detail',      
        name: 'Detail',      
        component: resolve => require(['@/pages/detail'], resolve)    
    }    
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
          return savedPosition    
    } else {      
          if (from.meta.keepAlive) {        
               from.meta.savedPosition = document.body.scrollTop;      
          }        
          return { x: 0, y: to.meta.savedPosition || 0 }    
    }  
}