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

  对于所有路由导航,简单地让页面滚动到顶部。

  返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: , y: }
}
}

  如果你要模拟『滚动到锚点』的行为:

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 =
position.y =
}
// 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: , y: to.meta.savedPosition ||}
}
}

  在无法使用history模式的情况下,使用另外一种方式:

const Foo = {
template: `
<div>
<div><a href="javascript:void(0)" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div>
<div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div>
</div>
`,
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop =
anchor.offsetTop
}

}
}
const Bar = {
template: '<div>bar</div>'
} const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
] const router = new VueRouter({
routes,
}) const app = new Vue({
router
}).$mount('#app')

Vue路由scrollBehavior滚动行为控制锚点的更多相关文章

  1. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  2. vue路由高级语法糖

    1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由 ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  5. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

  6. Vue路由-详细总结

    Vue路由vue-router   前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...

  7. Vue路由Hash模式分析

    Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...

  8. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  9. 【Vue路由系统详述】

    目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...

随机推荐

  1. php 简单计算权重的方法(适合抽奖类的应用)

    //简单权重计算器 $data222=array(     0=>array('id'=>1,'name'=>'一等奖','weight'=>'3'),     1=>a ...

  2. 【推导】【单调性】Petrozavodsk Winter Training Camp 2018 Day 1: Jagiellonian U Contest, Tuesday, January 30, 2018 Problem B. Tribute

    题意:有n个数,除了空集外,它们会形成2^n-1个子集,给你这些子集的和的结果,让你还原原来的n个数. 假设原数是3 5 16, 那么它们形成3 5 8 16 19 21 24, 那么第一轮取出开头的 ...

  3. PAT(Basic Level)--个位数统计

    输入一个不超过1000位的整数,计算每个数字出现的次数. 一道十分简单的题目,最开始以为Java的String没有计算长度的方法,还想了半天,而且还用HashMap做了一次,代码特别长,看了别人的代码 ...

  4. 在windows安装配置Git开发环境

    开始配置Git的开发环境.首先从google  code下载最新的windows的git安装包msysgit,当时我下载的是Git-1.7.4-preview20110204.exe,然后就开始安装了 ...

  5. 90. 子集 II

    90. 子集 II 题意 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2]输出:[ [2], [1], ...

  6. Python环境右键定制

    有时候,我们需要将py打包成exe.需要将ui转换成py.需要将py转换成pyc等等,命令行操作起来有点繁琐.所以做了这个教程: 1. py打包成exe 先安装cx_freeze,参照教程:http: ...

  7. ROS知识(13)----基于catkin的包安装

    ROS软件包开发完成后,需要安装包,如果你用的是catkin创建的工作空间,那么即可使用命令"catkin_make install"完成此项任务.下面介绍其安装的过程: 1.源码 ...

  8. Cocos2d-x移植android增加震动效果

    cpp部分通过jni调用java静态函数 头文件: #include <jni.h> #include "cocos2d.h" #include "platf ...

  9. cat ,more ,less 命令的使用和差别

    cat命令功能用于显示整个文件的内容单独使用没有翻页功能因此常常和more命令搭配使用,cat命令还有就是将数个文件合并成一个文件的功能. more命令功能:让画面在显示满一页时暂停,此时可按空格健继 ...

  10. 多线程调试必杀技 - GDB的non-stop模式

     作者:破砂锅  (转) 开源的GDB被广泛使用在Linux.OSX.Unix和各种嵌入式系统(例如手机),这次它又带给我们一个惊喜. 多线程调试之痛 调试器(如VS2008和老版GDB)往往只支持a ...