Vue-Router进阶之滚动行为详解


Posted in Javascript onSeptember 13, 2017

滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue移动端路由切换实例分析
May 14 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
You might like
php 前一天或后一天的日期
2008/06/28 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
简单了解django缓存方式及配置
2019/07/19 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
毕业设计说明书
2014/05/07 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
车辆年检委托书范本
2014/10/14 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
python处理json数据文件
2022/04/11 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python