当前位置:首页 > 日记 > 正文

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

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

滚动行为

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

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

相关文章

Photoshop设计科技感十足的banner

Photoshop设计科技感十足的banner

教程,电脑软件,Photoshop,感十足,banner,教你使用Photoshop设计科技感十足的banner底图,教程简单粗暴,只要几步即可完成。本次教程内容是来自Seso的作品,充满科技感的效果可以用到科技、家电、电子类产品的Banner的背景中,那么如何设计出这样的…

在bootstrap中实现轮播图实例代码

在bootstrap中实现轮播图实例代码

实例代码,轮播图,电脑软件,bootstrap,Bootstrap中轮播图插件叫作Carousel以下容器就是整个轮播图组件的整体,注意该盒子必须加上 class=”carousel slide” data-ride=”carousel” 表示当 前是一个轮播图bootstrap.js会自动为当前元素添加…

BootStrap中jQuery插件Carousel实

BootStrap中jQuery插件Carousel实

插件,效果,广告,电脑软件,BootStrap,轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果:具体实现方法请看下面的代码:<div class="carousel slide" data-ride="carousel…

Ps怎么设计出超酷的抽象图案?

Ps怎么设计出超酷的抽象图案?

抽象,超酷,图案,电脑软件,Ps,怎么也想不到,效果图竟是用简单的渐变工具来完成。过程也非常简单:选择黑白渐变后,在属性栏把混合模式改为&ldquo;差值&rdquo;。然后就可以随意拉渐变,即可得到一些抽象图案。后期再通过复制及叠加等做出更为复杂的…

php常用数组函数实例小结

php常用数组函数实例小结

数组函数,实例,常用,电脑软件,php,本文实例总结了php常用数组函数。分享给大家供大家参考,具体如下:1. array array_merge(array $array1 [, array $array2 [, $array]])函数功能:将一个或多个数组的单元合并起来,一个数组中的值附加在前一个…

ps怎么设计一款毛笔字体的水墨字效

ps怎么设计一款毛笔字体的水墨字效

字体,水墨,效果,电脑软件,ps,跟大家分享一下毛笔字怎么做出来的,主要通过字体和素材叠加,十分简单,喜欢的一起练习。做完记得交作业。先看看最终效果:软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-04软件名…

excel2010密码忘记了的处理方法exc

excel2010密码忘记了的处理方法exc

密码,处理方法,密码保护,忘记了,电脑软件,  在Excel中经常需要用到密码进行对重要数据的保护,但是可能过了段时间过后就已经忘记了密码,这个时候就需要我们用点技巧才可以把文档打开了。今天,小编就教大家Excel2010密码保护忘记的处理方法!Ex…

谈谈JavaScript数组常用方法总结

谈谈JavaScript数组常用方法总结

常用方法,数组,电脑软件,JavaScript,在JavaScript中,我们需要时常对数组进行操作,现在特将常用方法总结如下:1.增加数据在JavaScript为数组增加数据主要分为两种方式。 从数组末尾增加内容:push方法从数组的前端增加内容:unshift方法这两种方法…

PS怎么批量复制图层与批量删除图层

PS怎么批量复制图层与批量删除图层

删除图层,图层,批量,电脑软件,PS,我们用PS制图,有时需要大量的复制同一个图层,如何才能快速的便捷的复制出来呢?又如何把多出来不需要的大量图层给一次性删除呢?下面我们一起来看下具体是如何操作的。软件名称:Adobe Photoshop 8.0 中文完整绿色…

ps怎么给简笔画小鸟添加飞翔的动画

ps怎么给简笔画小鸟添加飞翔的动画

动画效果,小鸟,简笔画,电脑软件,ps,ps中想要制作一段动画,该怎么直走呢?下面我们就来看看给小鸟添加动画效果的教程。软件名称:Adobe photoshop 7.01 官方正式简体中文版软件大小:154MB更新时间:2013-04-191、首先启动Photoshop cs5,执行文件-新…

painter怎么使用画笔中的马克笔画

painter怎么使用画笔中的马克笔画

画图,马克笔,电脑软件,painter,Painter中画笔有很多样式,今天我们就来看看画笔中马克笔的使用方法。软件名称:Corel Painter(绘画软件) 2018 官方正式版(附注册机) 在线安装包 64位软件大小:994KB更新时间:2017-06-301、打开Painter软件,鼠标左…

CentOS 5.4搭建DHCP服务

CentOS 5.4搭建DHCP服务

服务,电脑软件,CentOS,DHCP,系统环境:DHCP服务器CentOS 5.4客户端Windows XP SP31、查看服务器IP地址2、检测系统是否已经安装DHCP服务,建立光盘挂载点挂载光盘3、进入光盘并查看内容,并安装DHCP服务安装包4、检测DHCP服务安装包的情况5、查看…