【vue3+ts】keep-alive缓存组件，路由跳转后，返回旧的页面依旧保留之前的数据及浏览位置。

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

爱吃胡萝卜的二木儿~

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

阅读量3.9k

点赞数 14

文章标签：缓存 vue.js 前端

本文链接：https://blog.youkuaiyun.com/lwc18639470699/article/details/135858371

版权

本文介绍了Vue中的KeepAlive组件如何用于缓存动态组件实例，解决路由跳转回首页时数据保留和滚动位置还原的问题，以及处理可能出现的过渡动画问题。

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

一、 `KeepAlive的含义`

<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。

任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。

当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。

上面一段是官网的解释。简单理解就是缓存组件的，不加它每次访问组件都会重新创建，重新创建也就意味着数据初始化，路由跳转走之后就会摧毁。

二、场景

我的场景是在首页有个点击‘更多’来路由跳转到列表页面。当我从列表页返回到首页时，页面重新刷新了。需求：要求返回首页时保留之前的数据

三、缓存组件

在App.vue里

<template>
<router-view v-slot="{Component}">
  <transition name="router-fade" mode="out-in">
    <keep-alive>
      <component :is="Component"/>
    </keep-alive>
  </transition>
</router-view>
</template>

router/index.js(ts)

 {
      path: '/',
      name: 'home',
      component: () => import('../views/Scene.vue'),
      meta:{
        keepAlive:true
      }
 },

此时你的页面可能会有一个警告： <Transition>中的组件呈现不能动画化的非元素根节点。

因为 <Transition>包裹组件的原因，组件内必须只有一个跟节点。所以在组件内用个div标签包裹即可

四、保留之前滚动位置

在返回的首页里

//定义变量
const placeScroll=ref()
onBeforeRouteLeave((to, from, next) => {
   //在路由跳转之前，对当前浏览位置进行保存
  placeScroll.value = document.documentElement.scrollTop
  next()
})
//组件激活
onActivated(() => {
  if (placeScroll.value != null && placeScroll.value > 0) {
    //组件激活后进行浏览位置的赋值
    document.documentElement.scrollTop = placeScroll.value
    document.body.scrollTop = placeScroll.value
  }
})

这样返回到首页时显示的就是之前的页面效果啦

此时还会出现一个问题，就是当我在首页浏览到一定位置后，点击“更多”，路由跳转到列表页面的位置和首页的位置一样。按理说我跳转一个新页面应该在顶部。此时在你跳转的页面里写一段这样的代码即可

//组件激活
onActivated(()=>{
  //组件激活后把页面位置设置为0即可
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
})