实用的滚动

好久不见. 提交于 2020-01-18 18:20:04

滚动行为

==用户良好的交互体验==

  • 功能 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
  • 注意事项
    这个功能只在 HTML5 history 模式下可用。

具体方法实例

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

to要去的路由
from 离开的路由对象
savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

滚动行为传递的值

即return后面的 值的类型

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

string 为to.hash值带#的

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!