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

最新推荐文章于 2024-09-27 15:50:02 发布

RubyLinT

最新推荐文章于 2024-09-27 15:50:02 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/RubyLinT/article/details/117778853

版权

vue 同时被 3 个专栏收录

33 篇文章

订阅专栏

24 篇文章

订阅专栏

html

6 篇文章

订阅专栏

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

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

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')
    }
  },