看源码的时候看到这个属性:

新手自然不知道这个是什么东西了,查了下vue  API:

https://router.vuejs.org/en/advanced/scroll-behavior.html

上面这个的意思就是当转到一个新的页面时,定位到最顶端。

Scroll Behavior

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.

Note: this feature only works in HTML5 history mode.

When creating the router instance, you can provide the scrollBehavior function:

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
}
})

The scrollBehavior function receives the to and from route objects. The third argument, savedPosition, is only available if this is a popstatenavigation (triggered by the browser's back/forward buttons).

The function can return a scroll position object. The object could be in the form of:

  • { x: number, y: number }
  • { selector: string }

If a falsy value or an empty object is returned, no scrolling will happen.

For example:

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

This will simply make the page scroll to top for all route navigations.

Returning the savedPosition will result in a native-like behavior when navigating with back/forward buttons:

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

If you want to simulate the "scroll to anchor" behavior:

scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}

We can also use route meta fields to implement fine-grained scroll behavior control. Check out a full example here.

vue2路由之指定滑动位置scrollBehavior-(载转)的更多相关文章

  1. vue2路由之指定滑动位置scrollBehavior

    看源码的时候看到这个属性: 新手自然不知道这个是什么东西了,查了下vue  API: https://router.vuejs.org/en/advanced/scroll-behavior.html ...

  2. json解析,异步下载(listview仅滑动时加载)Demo总结

    异步加载的练习demo 主要涉及知识点: 1.解析json格式数据,主要包括图片,文本 2.使用AsynTask异步方式从网络下载图片 3.BaseAdapter的"优雅"使用 4 ...

  3. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  4. express框架路由配置及congtroller自动加载

    express框架在node官方推荐的一个框架,关于如何入门的文章,已经很多了,我就不在累赘了,本文的核心是如何修改文件使得更接近一个MVC的框架 express原生是通过require的方式实现了模 ...

  5. springboot打包去除资源文件,启动时指定配置文件位置,使用log4j2替换默认logback

    springboot打包时,去掉资源文件 <build> <resources> <resource> <directory>src/main/reso ...

  6. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  7. Android RecyclerView使用 及 滑动时加载图片优化方案

    1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...

  8. [Android Pro] 精确记录和恢复ListView滑动位置

    reference to : http://blog.csdn.net/welovesunflower/article/details/7926512 工作中遇到一个需求,对ListView某一项操作 ...

  9. VS2013编译经常卡在正在从以下位置加载xxx.dll的符号

    换了系统后,重新下载了一个vs2013 with update2安装,编译的时候总是卡在 正在从以下位置加载xxx.dll的符号 如图: 解决方法: 进入VS---工具---选项----调试----符 ...

随机推荐

  1. 02-MySQL主要配置文件

    一.二进制日志log-bin 作用:主从复制 二.错误日志 log-err 默认关闭,记录严重的警告和错误信息,每次启动和关闭的详细信息 三.慢查询日志log 默认关闭,记录查询的sql语句,如果开启 ...

  2. antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...

  3. [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP

    [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 目录 [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 0x00 摘要 0x01 ...

  4. 【CTF】图片隐写术 · 修复被修改尺寸的PNG图片

    前言 今天我们想来介绍一下关于图片隐写相关处理,以及修复被修改尺寸的PNG图片. 关于PNG图片的相关处理,是CTF Misc图片隐写术中极为基础的一项操作,笔者这里是想要提一些做题过程中发现的小技巧 ...

  5. Go 包管理与依赖查找顺序

    目录 1. 规则: 2. 编译时的依赖包查找机制 3.vendor vendor的层级搜索 4. modules 1. 规则: 同一目录下只能存在一个包 目录和目录下源文件的包命名可以不同 当包名与目 ...

  6. 基于excel的接口自动化测试框架:支持参数化、关联等

    1. 框架结构说明 2. 框架代码实现 action 包  case_action.py business_process 包 main_process.py util 包 global_var.py ...

  7. k8s 创建私有docker仓库 登陆授权令牌的Secret

    参考https://kubernetes.io/zh/docs/tasks/configure-pod-container/pull-image-private-registry/ Kubernete ...

  8. 用Taro写一个微信小程序(一)——开始一个项目

    一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...

  9. adb、adb shell am、adb shell pm命令的详细使用说明

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/64183248 1.在命令行终端执行下面的命令: adb >adb.txt 2 ...

  10. Hack The Box - Archetype

    攻略的话在靶场内都有,也有官方的攻略,我作为一个技术小白,只是想把自己的通关过程记录下来,没有网站内大佬们写得好 我们获得了一个IP: 尝试访问了一下,应该不存在web页面: 对常规端口进行一个扫描: ...