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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
react中的DOM操作实现
Jun 30 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python中redis的安装和使用
2016/12/04 Python
Python中is与==判断的区别
2017/03/28 Python
python更改已存在excel文件的方法
2018/05/03 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
应届生求职信范文
2014/05/26 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
师范生见习报告范文
2014/11/03 职场文书
学校教学管理制度
2015/08/06 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python