vue2路由之指定滑动位置scrollBehavior-(载转)
看源码的时候看到这个属性:
新手自然不知道这个是什么东西了,查了下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-(载转)的更多相关文章
- vue2路由之指定滑动位置scrollBehavior
看源码的时候看到这个属性: 新手自然不知道这个是什么东西了,查了下vue API: https://router.vuejs.org/en/advanced/scroll-behavior.html ...
- json解析,异步下载(listview仅滑动时加载)Demo总结
异步加载的练习demo 主要涉及知识点: 1.解析json格式数据,主要包括图片,文本 2.使用AsynTask异步方式从网络下载图片 3.BaseAdapter的"优雅"使用 4 ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- express框架路由配置及congtroller自动加载
express框架在node官方推荐的一个框架,关于如何入门的文章,已经很多了,我就不在累赘了,本文的核心是如何修改文件使得更接近一个MVC的框架 express原生是通过require的方式实现了模 ...
- springboot打包去除资源文件,启动时指定配置文件位置,使用log4j2替换默认logback
springboot打包时,去掉资源文件 <build> <resources> <resource> <directory>src/main/reso ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- Android RecyclerView使用 及 滑动时加载图片优化方案
1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...
- [Android Pro] 精确记录和恢复ListView滑动位置
reference to : http://blog.csdn.net/welovesunflower/article/details/7926512 工作中遇到一个需求,对ListView某一项操作 ...
- VS2013编译经常卡在正在从以下位置加载xxx.dll的符号
换了系统后,重新下载了一个vs2013 with update2安装,编译的时候总是卡在 正在从以下位置加载xxx.dll的符号 如图: 解决方法: 进入VS---工具---选项----调试----符 ...
随机推荐
- spring-cloud-consul 服务注册发现与配置
下面是 Spring Cloud 支持的服务发现软件以及特性对比(Eureka 已停止更新,取而代之的是 Consul): Feature euerka Consul zookeeper etcd 服 ...
- C/C++中的字符串相关姿势
这是我在<程序设计实习>课程上作的pre,目标是对C/C++中字符串的相关内容作一个尽量完整的介绍.(对于OIer可能不太实用) 课件链接: https://files.cnblogs.c ...
- Spring Boot demo系列(六):HTTPS
2021.2.24 更新 1 概述 本文演示了如何给Spring Boot应用加上HTTPS的过程. 2 证书 虽然证书能自己生成,使用JDK自带的keytool即可,但是生产环境是不可能使用自己生成 ...
- 一个Bug,让我发现了 Java 界的.AJ(锥)!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 话我放这,踩过的坑越多头发越少! 说来也是奇怪,只要是学编程的,从初次接触的 Jav ...
- Matrix Chain Multiplication UVA - 442
Suppose you have to evaluate an expression like ABCDE where A,B,C,D and E are matrices. Since matrix ...
- 配置 ESLint 自动格式化自闭合标签(Self closing tag)
对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...
- WebPack系列--开启HappyPack之后,再将项目打包速度缩短5秒
效果展示 打包时间:缩短了 26.296s-20.586s=5.71s 先看两组测试数据,第一组是没有使用DllPlugin的打包测试数据,测量三次取平均值是26.296s(25.72+25.56+2 ...
- 光猫和路由器都支持ipv6,却无法使用ipv6?
这些年很多地方的光猫都能获得ipv6地址了,而且新出的路由基本都支持ipv6,但是还是有很多人在http://test-ipv6.com看不到自己的ipv6地址,也上不了ipv6网站. 我也遇到这个问 ...
- 支持移远EC600S的SmartDtu平台,基于QuecPython
前言 本文的主要目的是说明青石SmartDtu到底做了哪些工作?我们在移远硬件平台EC600S上做了哪些支持?为什么说这套平台是硬件开发者的福音?我们的初衷是解放广大硬件开发者的双手,提供一套成熟的嵌 ...
- hdu4994 博弈,按顺序拿球
题意: 给你n堆东西,两个人博弈的去拿,每次最少一个,最多是一堆,必须按顺序那,也就是只有把第一堆的东西拿完了才能去拿第二堆东西,谁先拿完谁胜,问新手是否能胜利. 思路: 显然 ...