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: 0, y: 0 }
}
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}
时间: 2024-11-05 05:34:52

vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法的相关文章

ajax 页面请求后,jsp页面定位

如下图所示.A,B两区域为不动区域,既不随着滚动条的滚动而移动.C区域为异步加载内容区域, 在C区域中,点击查询按钮,需要异步加载查询 结果.但是查询结果会很长,这样子,就需要向下滑动滚动条,用户体验不是很好.所以决定点击查询按钮后,页面自动的向下滚动.所以使用了scrollTop 这个方法 具体代码只有一行就搞定了! 我的这个滚动条是body级别的!所以使用如下: $("body").scrollTop(450); 如果是div级别的滚动条,获取div对象.scrollTop(&qu

子页面提交后刷新父页面问题

在弹出的子页面在做新增和修改操作时, 有时要对父页面进行刷新操作, 可以关闭子页面后刷新父页面, 也可以不关闭子页面刷新父页面,在网上查到了方法, 在这里记一下,方便以后的学习查找. 一. 弹出子页面关闭刷新父页面: 在父页面js中回调window.opener.location.reload(); <script language=JavaScript> window.opener.location.reload(); </script> 二. 不关闭子页面刷新父页面: 在子页面

微信子页面关闭后刷新父页面

前段时间开发微信公众号时,需要用到从编辑页面点击保存后,跳转到列表页面后并刷新,网上找了好多 function f_close(){ if(typeof(WeixinJSBridge)!="undefined"){ //WeixinJSBridge.call('closeWindow'); history.go(-1); }else{ if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator.us

FragmentTabHost切换Fragment时避免重复加载UI,导致切换后重绘页面的问题解决

项目中用到了FragmentTabHost,痛苦的是切换Fragment时页面总是重新加载无法保证是切换前的状态,现在得以解决! 问题:使用FragmentTabHost时,Fragment之间切换时每次都会调用onCreateView方法,导致每次Fragment的布局都重绘,无法保持Fragment原有状态. 解决办法:在Fragment onCreateView方法中缓存View @Override public View onCreateView(LayoutInflater infla

实现从页面登录后返回该页面

1. js 代码 /*获取源页面的url*/ var path = window.location.pathname.substr(7); /*将源页面的url作为参数传递到控制层*/ window.location.href="url?origin="+path; 2. java 代码 @RequestMapping(value = "/url") public String doLogin(String origin,HttpSession session){

js window.open()打开的页面关闭后刷新父页面

function test(){ var winObj = window.open(URL); var loop = setInterval(function(){ if(winObj.closed){ clearInterval(loop); parent.location.reload(); } },1); }

html5各种页面切换效果和模态对话框

页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop">I'll pop</a>data-transition 参数表:参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 dat

基于html5和css3响应式全屏滚动页面切换效果

分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrapper div的class为st-container,里面包含作为导航按钮的radio和用于页面切换的面板st-scroll. <div class="st-container"> <input type="radio" name="radio-

PDF中的空白页面怎么删除,PDF页面删除技巧

在Word中想要删除其中一页文档的怎么办?直接打开就可以删除了,那么我们如何删除PDF其中几页呢?下面小编就来告诉大家PDF删除页面跟空白页面的方法.想要删除PDF文档中的页面,可以使用PDF编辑器,编辑器就是可以编辑PDF文件,里面有很多的编辑工具,水印工具,页眉页脚工具,贝茨编号工具,背景工具等等,下面是具体的操作方法. 操作软件:PDF编辑器http://bianji.xjpdf.com/ 1.打开运行迅捷PDF编辑器,在编辑器中打开需要编辑的PDF文件 2.PDF文件打开之后,找到菜单栏