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

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

RubyLinT

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

阅读量1.3k

点赞数

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

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

版权

vue 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

24 篇文章 1 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

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