zoukankan      html  css  js  c++  java
  • Vue Router 记住页面滚动位置的简单实现

    本质就是, 利用内置组件<keep-alive>在页面组件得以被缓存的基础上, 再加以document.documentElement.scrollTop获取滚动距离, 后返回页面时恢复滚动距离
    实现效果, 打开A页面, 滚动至a处, 切换至B页面, 返回A页面, 此时页面位置为a点而非顶部

    路由出口

     <div class="main">
        <!-- 包裹`<keep-alive>` -->
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    

    页面组件

    export default {
        data(){
          scrollTop: 0, // 储存滚动位置
        },
        activated() {
          // 进入该组件后读取数据变量设置滚动位置
          // 注意, 此处由页面是否具有 DTD (如: `<!DOCTYPE html>`), 决定具体选择, 详见参考资料
          document.documentElement.scrollTop = this.scrollTop;
          // document.body.scrollTop = this.scrollTop;
        },
        beforeRouteLeave(to, from, next) {
          // 离开组件时保存滚动位置
          // 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
          // 因为, 此时利用`deactivated`获取的 DOM 信息已经是新页面得了
          this.scrollTop = document.documentElement.scrollTop;
          next();
        },
      }
    

     原文链接:https://www.cnblogs.com/classlate/p/15501987.html

      

  • 相关阅读:
    vue 使用sass 和less
    生命周期函数以及vue的全局注册
    vue-router的简单实现原理
    vue的三种传参方式
    配置router列表
    vue传参二
    Gym 101933E(状态压缩+记忆化搜索)
    Gym 101933 A(dp)
    Gym 101775H(dp)
    Gym 101775 D (思维)
  • 原文地址:https://www.cnblogs.com/ZXH-null/p/15578549.html
Copyright © 2011-2022 走看看