zoukankan      html  css  js  c++  java
  • vue路由跳转时进入新的页面,滚动条的位置停留在上个页面的位置,没有回到顶部 keep-alive包裹的路由

    需求分析:

    一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动。当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页面,然后点击浏览器返回按钮的时候,我们是希望能保持之前的滚动位置的。

    缓存?解决这个问题,第一时间想到的是缓存keep-alive,但是缓存只是不执行create/mounted生命周期钩子,页面滚动位置是无法保留的,通过缓存的方法无法实现这个效果。

    滚动?也有同事提过使用滚动模拟,但是vue是单页面应用框架,整个项目就一个window对象,实现起来也是比较麻烦的,而且效果不一定好。

    最后就找到了vue官方提供的进阶功能——滚动行为,通过这个功能,可以自定义路由切换时页面如何滚动。

    功能行为 :

    使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

    示例代码:

    复制代码
    const router = new Router({
        mode: "history",
        routes: routes,
        scrollBehavior(to, from, savedPosition) {
            console.log(savedPosition)
            if(savedPosition) {
                return savedPosition
            } else {
                return {
                    x: 0,
                    y: 0
                }
            }
        }
    });
    复制代码

    注意:该功能只能在history的路由模式下有效,对于某些页面操作可能会影响上一个页面的展示,那么上一个页面就不应该做滚动处理,这个时候就可以根据路由的来源和去向来判断是否需要滚动了。

    个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt
  • 相关阅读:
    从万元户到千万富翁:6招助你蜕变
    16款有助于提升工作效率的工具
    8个身家百万的儿童创业者
    关于航模无刷电机发热问题的假想解决方案
    折腾了2个晚上无刷电调(ESC),电机终于转起来了,特此记录一下
    PWM占空比和分辨率(转)
    MSB与LSB(转)
    树莓派3uart wifi模块调试 (浪费了我3天时间的宝贵经验)
    USB加minicom使用串口
    【转】使用BBB的device tree和cape(重新整理版)
  • 原文地址:https://www.cnblogs.com/wsj1/p/13957862.html
Copyright © 2011-2022 走看看