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

新手自然不知道这个是什么东西了,查了下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 popstate navigation (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. [Android Pro] 精确记录和恢复ListView滑动位置

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

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

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

  4. MYSQL 为表指定文件位置 data directory

    背景知识: 如果表不指定文件位置,它会保存到 data/database_name/table_file;其中data在你指定的安装目录下,为了提高IO我们尽可能的 用到多个硬盘的IO能力,这个就需要 ...

  5. 如何在Android Studio中指定NDK位置?

    如何在Android Studio中指定NDK位置? 问题描述 NDK已经手工下载解包在本地: D:\Portable\android-ndk-r13b 每次创建支持C++项目时,都提示NDK没配置, ...

  6. Selenium 指定浏览器位置

    在脚本开头要指定浏览器位置. public static void main(String[] args) throws InterruptedException, IOException { Sys ...

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

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

  8. Android ListView滚动到指定的位置

    这篇文章主要给大家介绍了Android中的ListView如何滚动到指定的位置,文章给出了两种解决的方法,并给出详细的示例代码,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧. 本文 ...

  9. 在textarea中鼠标指定的位置插入字符或表情

    有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到jquery的一个小插件了. 代码如下: (function ($) { $.fn.extend ...

随机推荐

  1. Python3 数据类型-元组

    Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 实例1(Python3.0+): tu ...

  2. php性能优化--opcache

    一.OPcache是什么? OPcache通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销. PHP 5 ...

  3. CentOS Openvpn搭建以及 linux&&windows客户端的连接

    本文参考:http://www.centoscn.com/CentosServer/test/2014/1120/4153.html 一. Server安装准备     (CentOS release ...

  4. java中 i = i++和 j = i++ 的区别

    由于i++和i--的使用会导致值的改变,所以在处理后置的++和--的时候,java的编译器会重新为变量分配一块新的内存空间,用来存放原来的值, 而完成赋值运算之后,这块内存会被释放. (1)对于j = ...

  5. 在cmd里面使用mysql命令

    1.先找出mysqld文件所在的位置,我的是在C:\Program Files\MySQL\MySQL Server 5.1\bin. 2.cd C:\Program Files\MySQL\MySQ ...

  6. 搭建github

    http://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html

  7. lintcode-153-数字组合 II

    153-数字组合 II 给出一组候选数字(C)和目标数字(T),找出C中所有的组合,使组合中数字的和为T.C中每个数字在每个组合中只能使用一次. 注意事项 所有的数字(包括目标数字)均为正整数. 元素 ...

  8. YaoLingJump开发者日志(九)V1.1.1版本完成

    跳跃吧瑶玲下载连接 百度网盘下载 介绍   Android版本升级到8.0,发现原来的图标不显示了:   百度了一下解决方案,用了该博客提供的第二种方法,修改roundIcon的内容.   可爱的图标 ...

  9. YaoLingJump开发者日志(四)

      这么有意思的游戏没有剧情怎么行?开始剧情的搭建.   用到了LGame中的AVGScreen,确实是个好东西呢,只需要准备图片和对话脚本就行了.   经过不断的ps,yy,ps,yy,游戏开头的剧 ...

  10. 【week2】 累计进度条、psp、饼图

    每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间 2016年9月9日 读书 构建之法-5.6章 19:00 20:00 0 60min 2016年9月10日 看博客 ...