vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法
vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
这个功能只在 HTML5 history 模式下可用。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
{ x: number, y: number }
{ selector: string }
scrollBehavior (to, from, savedPosition) {
return { x: , y: }
}
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: , y: }
}
}
vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法的更多相关文章
- ajax 页面请求后,jsp页面定位
如下图所示.A,B两区域为不动区域,既不随着滚动条的滚动而移动.C区域为异步加载内容区域, 在C区域中,点击查询按钮,需要异步加载查询 结果.但是查询结果会很长,这样子,就需要向下滑动滚动条,用户体验 ...
- window.open页面关闭后刷新父页面
如题 function openWin(url,text,winInfo){ var winObj = window.open(url,text,winInfo); var loop = setInt ...
- js window.open()打开的页面关闭后刷新父页面
function test(){ var winObj = window.open(URL); var loop = setInterval(function(){ if(winObj.closed) ...
- Vue Router滚动行为 scrollBehavior
滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...
- vue项目页面切换到默认显示顶部
页面切换到默认显示顶部 方法一 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- Vue 之keep-alive的使用,实现页面缓存
什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...
- html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
- Ionic3关闭弹出页面,跳转到列表后刷新父页面
记得上次写过一篇如何弹出页面的文章,好像是2月28号ionic3 Modal组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...
随机推荐
- IBM MQ安装
一.下载MQ 可以去官方网站下载,我这次下了一个下载器从官方,然后通过下载器进行MQ的下载. 地址:https://www.ibm.com/developerworks/cn/downloads/ws ...
- Tomcat:javax.management.InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat异常
问题: 在关闭tomcat时: Tomat报出一下异常:ERROR [com.alibaba.druid.stat.DruidDataSourceStatManager] – unregister m ...
- (77)zabbix主动、被动检测的详细过程与区别
zabbix agent检测分为主动(agent active)和被动(agent)两种形式,主动与被动的说法均是相对于agent来讨论的.简单说明一下主动与被动的区别如下: 主动:agent请求se ...
- JZOJ 2137. 【GDKOI2004】城市统计 (Standard IO)
2137. [GDKOI2004]城市统计 (Standard IO) Time Limits: 1000 ms Memory Limits: 128000 KB Detailed Limits ...
- day13内置函数
内置函数 一.三元表达式 def max2(x,y): if x>y: return x else: return y res=max2(10,11) print(res) 三元表达式仅应用于: ...
- Apache虚拟主机测试
一.虚拟机主机简介 部署多个站点,每个站点,希望用不同的域名和站点目录,或者是不同的端口,或不同的ip,就需要虚拟主机功能.简单的说一个http服务要配置多个站点,就需要虚拟主机.(一句话一个http ...
- SharedPreferences使用(通过键值保存数据)
保存数据到SharedPreferences中 要想使用SharedPreferences来存储数据, 首先需要获取到SharedPreferences对象. Android中主要提供了三种方法用于得 ...
- 自定义 popWindow弹框 工具包
前言:因为Android 没有像IOS一样的ActionSheet,虽然在github上看到有一些类似ActionSheet的库,总觉得不好用,不如自己写一个弹框通用类,样式全部自已来多好. Step ...
- JS空数组的判断
前言 最近在做一个mini项目,被大神各种鄙视,基础知识确实是不扎实,加油加油.好了,不多废话,抽空写写遇到的两个知识点,就记录下来,写博客还是能帮忙整理记录的,不然过了就忘记了. input监听值改 ...
- socketCluster 使用
<html> <head> <title>test</title> <script src="https://cdn.bootcss.c ...