vue3 keep-alive使用示例 解决切换页面滚动条不复位问题

---

postId: “198”
postType: post
categories:

• 5

---

springboot + vue3 实现论坛

问题：进入帖子详情，再返回帖子列表会重新请求（完全可以不用请求，降低服务器压力），而且滚动条会回到帖子中翻到的位置

开始研究keep alive
路由结构

children: [  
    {  
        path: '',  
        name: 'post',  
        component: () => import("@/views/forum/Forum.vue"),  
        children: [  
            {  
                path: "posts",  
                name: "posts",  
                component: () => import('../views/forum/Posts.vue'),  
                //meta: { keepAlive: true }  
            },  
            {  
                path: "post-detail/:pid",  
                name: "post-detail",  
                component: () => import('../views/forum/PostDetail.vue'),  
                //meta: { title:'帖子详情',keepAlive: false }  
            }  
        ]  
    },

1. 首先注意层级关系，比如我这里需要让posts保活，就必须去父路由加keep alive标签

// Forum.vue
<router-view v-slot="{Component}">  
  <transition name="el-fade-in-linear" mode="out-in">  
    <keep-alive include="Posts">  
      <component :is="Component" style="height: 100%"/>  
    </keep-alive>  
  </transition>
</router-view>

2. 注意include=“Posts” 参数

这里的include中的参数不是路由中的name！！！
而是Post.vue 中的Post文件名

完成这一步配置 基本保活就完成了 解决了重复发请求且浪费浏览器性能问题

3. 通过 缓存实例的生命周期 保存滚动条位置

import { onActivated, onDeactivated } from 'vue'  
  
const scrollTop = ref(0)  
  
onActivated(() => {  
  console.log("恢复位置"+scrollTop.value)  
  // 激活时恢复滚动位置  
  window.scrollTo(0, scrollTop.value)  
})  
  
onDeactivated(() => {  
  // 失活时保存滚动位置  
  scrollTop.value =  document.body.scrollTop || window.pageYOffset  
  console.log("保存位置"+scrollTop.value)  
})