这次给大家带来Vue-Router的滚动行为使用详解，Vue-Router滚动行为使用的注意事项有哪些，下面就是实战案例，一起来看一下。
滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在 HTML5 history 模式下可用。
当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
var router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 }})
登录后复制
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
这个方法返回滚动位置的对象信息，长这样：
{ x: number, y: number }
{ selector: string }
如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。
举例：
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}
登录后复制
对于所有路由导航，简单地让页面滚动到顶部。
返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：
scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } }}
登录后复制
如果你要模拟『滚动到锚点』的行为：
scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } }}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Three.js使用详解
Particles.js库在vue里如何使用
立即学习“前端免费学习笔记（深入）”；
以上就是Vue-Router的滚动行为使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771484.html
