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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
几行js代码实现自适应
Feb 24 Javascript
Vue.use源码分析
Apr 22 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python中无限循环需要什么条件
2020/05/27 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
中学生关于梦想的演讲稿
2014/08/22 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python