zoukankan      html  css  js  c++  java
  • vue2路由之指定滑动位置scrollBehavior

    看源码的时候看到这个属性:

    新手自然不知道这个是什么东西了,查了下vue  API:

    https://router.vuejs.org/en/advanced/scroll-behavior.html

    上面这个的意思就是当转到一个新的页面时,定位到最顶端。

    Scroll Behavior

    When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

    Note: this feature only works in HTML5 history mode.

    When creating the router instance, you can provide the scrollBehavior function:

    const router = new VueRouter({
      routes: [...],
      scrollBehavior (to, from, savedPosition) {
        // return desired position
      }
    })

    The scrollBehavior function receives the to and from route objects. The third argument, savedPosition, is only available if this is a popstate navigation (triggered by the browser's back/forward buttons).

    The function can return a scroll position object. The object could be in the form of:

    • { x: number, y: number }
    • { selector: string }

    If a falsy value or an empty object is returned, no scrolling will happen.

    For example:

    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
    

    This will simply make the page scroll to top for all route navigations.

    Returning the savedPosition will result in a native-like behavior when navigating with back/forward buttons:

    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
    

    If you want to simulate the "scroll to anchor" behavior:

    scrollBehavior (to, from, savedPosition) {
      if (to.hash) {
        return {
          selector: to.hash
        }
      }
    }
    

    We can also use route meta fields to implement fine-grained scroll behavior control. Check out a full example here.

  • 相关阅读:
    css3发光闪烁的效果
    移动端滚动加载数据实现
    JS生成一个简单的验证码
    百度地图在IOS中不显示
    vue开发神奇vue-devtools的安装
    gulp搭建服务
    webstorm中配置ES6语法
    centos 7 中防火墙的关闭问题
    centos命令
    Cesium加载影像
  • 原文地址:https://www.cnblogs.com/guazi/p/6759323.html
Copyright © 2011-2022 走看看