vue 返回上一页不刷新页面且滚动条位置不变

最新推荐文章于 2025-03-19 10:24:43 发布

原创最新推荐文章于 2025-03-19 10:24:43 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html5

vue 同时被 3 个专栏收录

33 篇文章

订阅专栏

24 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文介绍如何在前端开发中实现页面不刷新及滚动条位置保持不变的技术方案。通过设置路由元信息和使用keep-alive组件来缓存页面状态，并利用会话存储记录和恢复滚动条位置。

1.不刷新页面：

设置路由：

{ path: '/room/polling',name: 'roomList',component:()=>import("@/views/room/list.vue"),meta:{
    title:'title',
    keepAlive: true // 需要缓存
  }},

设置app.vue：

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

2.滚动条不变：

页面离开前存一下滚动条位置：

let dom = document.getElementById('dom1')
KitSession.setItem('top',dom.scrollTop)

页面返回时设置滚动条位置：

activated(){
    let top = KitSession.getItem('top')
    if(top!==null){
      let dom = document.getElementById('dom1')
      this.$nextTick(()=>{
        dom.scrollTop = top
      })
      KitSession.removeItem('top')
    }
  },