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组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...
随机推荐
- mysql添加、移除服务
sc delete 服务名 路径/bin/mysqld --install 服务名
- c 语言技巧
位运算 & 位逻辑与 | 位逻辑或 ^ 位逻辑异或 - 位逻辑反 >> 右移 << 左移 通过对数据本身的01编码进行处理,速度稍微快于普通运算符 如,10 / 2 = ...
- js中如何把RGB颜色转换为16进制颜色
将RGB颜色值转换为16进制颜色值,主要是将 R.G.B 值分别转换为对应的十六进制值,填入 #RRGGBB 中. 推荐在线颜色转换工具:http://www.ecjson.com/rgbhex/ 例 ...
- 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串
cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...
- [基础学习]MySQL常用语句命令总结
前言 相信平时大家在开发时都会使用MySQL数据库,它是目前比较火的一款数据库工具,对于大多数企业的业务来说,MySQL可以很完美地支持了. 很多时候我们都是借助mysql可视化工具操作mysql,虽 ...
- python练手习题
不断记录python常见习题,不断寻求更多更好的解决办法.持续更新中..... 练习: 1. list两两元素交换位置,如[1,2,3,4,5,6] 执行后为 -> [2,1,4,3,6,5] ...
- 动态规划:最长上升子序列之基础(经典算法 n^2)
解题心得: 1.注意动态转移方程式,d[j]+1>d[i]>?d[i]=d[j]+1:d[i] 2.动态规划的基本思想:将大的问题化为小的,再逐步扩大得到答案,但是小问题的基本性质要和大的 ...
- Spark性能优化:shuffle调优
调优概述 大多数Spark作业的性能主要就是消耗在了shuffle环节,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作.因此,如果要让作业的性能更上一层楼,就有必要对shuffle过程进行 ...
- Python-S9-Day114——Flask开始实战
01 今日内容概要 02 课前分享 03 内容回顾 04 路飞学城表结构(一) 05 路飞学城表结构(二) 06 路飞学城立即支付思路 07 今日作业 08 初识Flask 09 werkzug 10 ...
- LuffyCity-MySQL综合练习50实例
1.请创建如下表,并添加相应约束: 2.自行构造测试数据: 新建数据库 创建表 构造测试数据 #Step1-创建数据库LuffyCity_MySQL; #CREATE DATABASE LuffyCi ...