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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
token 机制和实现方式
Dec 15 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
python zip文件 压缩
2008/12/24 Python
Python守护线程用法实例
2017/06/23 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
python使用matplotlib绘制热图
2018/11/07 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python批量图片处理简单示例
2019/08/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python中logger日志模块详解
2020/08/04 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
研究生自荐信
2013/10/09 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Python if else条件语句形式详解
2022/03/24 Python