使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在 HTML5 history 模式下可用。

当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息,长这样:

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注:falsy 不是 false参考这里)的值,或者是一个空对象,那么不会发生滚动。

举例:

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
}
}
}

我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子:

const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
// savedPosition is only available for popstate navigations.
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
// 如果meta中有scrollTop
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}

与keepAlive结合,如果keepAlive的话,保存停留的位置:

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
  from.meta.savedPosition = document.body.scrollTop;
}
return { x: 0, y: to.meta.savedPosition ||0}
}
}

ue路由中设置滚动行为(scrollBehavior)

责编:menVScode 2017-12-02 10:39 阅读(2579)

在文档页面(http://localhost:8080/document)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。

但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。

这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数,函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。

scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
}

  

实现滚动行为的代码:router/index.js

let router = new VueRouter({
mode:'history',//默认是hash模式
linkActiveClass:'menvscode-active',
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
if(savePosition) {
return savePosition;
}else{
return {x:0,y:0}
}
},
routes:[
{
path:'/',
name:'index',
component:Home,
},
{
path:'/home',
name:'Home',//name代表当前的路由
component:Home,
alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
},
{
path:'/document',
name:'Document',
components:{ // 多个视图的时候,默认渲染default的视图。
default:Document,
slider:Slider,
home:Home
}
}
]
}) export default router

  

我们还可以设hash来控制滚动行为,定位到某一位置

if(to.hash){ //先判断目标路由有没有hash值
return {selector:to.hash}
}

  

App.vue:在路径后面添加 hash 值。

<template>
<div id="app">
<div class="nav-box">
<ul class="f-cb">
<li>
<router-link to="/" exact tag="div" event="mouseover">home</router-link>
</li>
<li>
<router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link>
</li>
<router-link to="/about" tag="li" event="mouseover">
<i></i>
<span>about</span>
</router-link>
</ul>
</div>
<div class="content f-cb">
<router-view name="slider"></router-view> <!-- 命名视图 -->
<router-view class="center"></router-view>
</div>
</div>
</template>

  

@/components/Document.vue

<template>
<div>
我是文档
<p id="abc">定位到这个元素</p>
</div>
</template>

  

router/index.js

let router = new VueRouter({
mode:'history',//默认是hash模式
linkActiveClass:'menvscode-active',
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
/*if(savePosition) {
return savePosition;
}else{
return {x:0,y:0}
}*/
if(to.hash){ //先判断目标路由有没有hash值
return {selector:to.hash}
}
},
routes:[]
}) export default router

  

vueRouter中scrollBehavior实现滚动固定位置的更多相关文章

  1. vue-router中scrollBehavior的巧妙用法

    问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"> <keep-alive> <rout ...

  2. HTML中设置在浏览器中固定位置fixed定位

    之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接.刚开始是想在博文最下方,加个返回文章列表的链 ...

  3. “Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置

    这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一 ...

  4. WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条)

    原文:WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条) 对于TreeView而言: TreeViewAut ...

  5. opencv、numpy中矩阵转置,矩阵内的固定位置相应的坐标变换

    opencv.numpy中矩阵转置,矩阵内的固定位置相应的坐标变换

  6. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  7. 滚动固定TAB在顶部显示

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

  9. Android RecyclerView 滚动到中间位置

    最近看到QQ音乐的歌词每次滑动后都可以滚回到中间位置.觉得甚是神奇,打开开发者模式显示布局,发现歌词部分不是采用 android 控件的写的,应该是前端写的.于是,我想,能不能用 recyclerVi ...

随机推荐

  1. Java学习第一周博客

    20145307<Java程序设计>第一周学习总结 教材学习内容总结 首先学习安装Java有两种方法,一种是用Eclipse直接编辑输出,另一种方法是用记事本之后用win+G开启cmd运行 ...

  2. mysql数据库无法连接(JDBC)java.net.ConnectException: Connection timed out

    数据库无法连接(JDBC) 用户名密码正确,但是一直报错:Connection timed out 后来知道了原因:我用的是BAE提供的云mysql数据库,对访问的IP有限制 ,所以在本机上无法连接. ...

  3. maven 环境变量配置问题 cmd窗口报mvn -v不是内部或者外部的命令

    早上整了一早上maven环境问题,配置的环境变量  系统变量 MAVEN_HOME  C:\JavaTools\apache-maven-3.3.9 本机maven路径,Path变量中编辑,引用的是; ...

  4. LeetCode——minimum-path-sum

    Question Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...

  5. Java实习二

    链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...

  6. windows系统下简单node.js环境配置 安装

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...

  7. 分析java进程假死状况

    摘自: http://www.myexception.cn/internet/2044496.html 分析java进程假死情况 1 引言 1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常 ...

  8. ubuntu18.04里更新系统源和pip源

    一.修改ubuntu系统源 我的ubuntu系统是在清华的开源网站上下的,所以我还以为他应该就帮我弄好源了,可是没想到下载的还是非常慢,看到下载的时候网址前还有个us,就知道不是国内源了.所以这里我们 ...

  9. 常见HTTP状态(304,)

    一.1XX(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示:已经收到请求的第一部分,正在等待其余部分. 101(切换协议) 请 ...

  10. winform如何让窗体不显示Icon但在任务栏中显示Icon

    protected override void OnShown(EventArgs e) { base.OnShown(e); const int WM_SETICON = 0x80; Bitmap ...