详解10分钟学会vue滚动行为

本篇文章主要介绍了vue滚动行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

滚动行为

什么是路由的滚动行为

当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样

注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务

我们用scrollBehavior 方法来做路由滚动

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用

下面我们做一个小案例来了解一下

效果

 

滚动行为

  • 首页
  • 导航
  • 关于
  • 红色页面
  • 蓝色页面

vue滚动小案例

https://besmall.github.io/vue-gundong/

https://github.com/Besmall/vue-gundong

以上就是详解10分钟学会vue滚动行为的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程