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组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...
随机推荐
- 【计数】cf938E. Max History
发现有一种奇怪的方法不能快速预处理? 复习一下常见的凑组合数的套路 You are given an array a of length n. We define fa the following w ...
- redis Connection refused 远程连接错误
redis 远程连接时报错: Exception in thread "main" redis.clients.jedis.exceptions.JedisConnectionE ...
- Vue2+webpack+node 配置+入门+详解
Vue2介绍 1.vue2.0 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层 采用单文件组件 复杂大型单页应用程序(SPA) 响 ...
- python内置函数-排列组合函数
product 笛卡尔积 (有放回抽样排列) permutations 排列 (不放回抽样排列) combinations 组合,没有重复 (不放回抽样组合) combinations_with_re ...
- vscode添加Astyle
1.安装astyle插件,在应用商城里面一键安装即可.2.下载astyle的bin文件,并添加到系统环境变量.3.打开vscode的settings.json,添加以下代码. { "edit ...
- [BZOJ1588]营业额统计(Splay)
Description 题意:给定 n个数,每给定一个数,在之前的数里找一个与当前数相差最小的数,求相差之和(第一个数为它本身) 如:5 1 2 5 4 6 Ans=5+|1-5|+|2-1|+|5- ...
- 笔记-python-standard library-12.1 pickle
笔记-python-standard library-12.1 pickle 1. pickle简介 source code: Lib/pickle.py pickle模块实质上是一个实现p ...
- centos6.4编译hadoop2.4源码
4.1.环境: 1)Linux 64 位操作系统,CentOS 6.4 版本,VMWare 搭建的虚拟机 2)虚拟机可以联网 4.2.官方编译说明: 解压命令:tar -zxvf hadoop-2.4 ...
- HTML5——7个最牛的HTML5移动开发框架
月的iPhoneDevCamp上写成的.创建它的一个主要动力是基于一个几乎每一个单独的iPhone开发新手都要面对的简单事实:Objective-C是一个对Web开发人员来说非常陌生的环境,并且Web ...
- Aizu 2560 Point Distance FFT
题意: 有一个\(N \times N\)的方阵,第\(x\)行第\(y\)列有\(C_{x,y}\)个点\((0 \leq C_{x,y} \leq 9)\). 任选两个不同的点,求两点欧几里德距离 ...