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 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法的更多相关文章

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

    如下图所示.A,B两区域为不动区域,既不随着滚动条的滚动而移动.C区域为异步加载内容区域, 在C区域中,点击查询按钮,需要异步加载查询 结果.但是查询结果会很长,这样子,就需要向下滑动滚动条,用户体验 ...

  2. window.open页面关闭后刷新父页面

    如题 function openWin(url,text,winInfo){ var winObj = window.open(url,text,winInfo); var loop = setInt ...

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

    function test(){ var winObj = window.open(URL); var loop = setInterval(function(){ if(winObj.closed) ...

  4. Vue Router滚动行为 scrollBehavior

    滚动行为 使用前端路由,当切换到新路由时,想要页面滚动到顶部或者是保持原先的滚动位置,就像重新加载页面那样. vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意:这个 ...

  5. vue项目页面切换到默认显示顶部

    页面切换到默认显示顶部 方法一 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页 ...

  6. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  7. Vue 之keep-alive的使用,实现页面缓存

    什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...

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

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  9. Ionic3关闭弹出页面,跳转到列表后刷新父页面

    记得上次写过一篇如何弹出页面的文章,好像是2月28号ionic3 Modal组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...

随机推荐

  1. 解决MySQL安装到最后一步未响应的三种方法

    这种情况一般是你以前安装过MySQL数据库服务项被占用了.解决方法: 方法一:安装MySQL的时候在这一步时它默认的服务名是“MySQL” 只需要把这个名字改了就可以了.可以把默认的服务器的名称手动改 ...

  2. nodejs fs路径

    引用:https://www.cnblogs.com/guangzhou11/p/7705257.html require()别的js文件的时候,将执行那个js文件. 注意: require()中的路 ...

  3. Mysql--数据操作语言(DML)

    定义:数据操作语言主要实现对数据库表中的数据进行操作,主要包括插入(insert).更新(update).删除(delete).查询(select),本节主要介绍增删改. 数据准备: 一.数据的插入( ...

  4. 简单的Maven+SpringMVC

    一.SpringMVC非注解编程 1:修改pom.xml文件(相当于非Maven项目的导入jar包) <!-- https://mvnrepository.com/artifact/org.sp ...

  5. 安装配置mysql图文步骤以及配置mysql的环境变量的步骤

    MySQL下载地址:http://dev.mysql.com/downloads/installer/ 我的数据库是5.5.21这个版本的.其实可以一直点击next,直到出现第14张图,从这里开始要注 ...

  6. sendmail安装与配置

    一.安装sendmail与mail 1.安装sendmail:  1) centos下可以安装命令:yum -y install sendmail 2) 安装完后启动sendmail命令:servic ...

  7. ajax400错误

    在用ajax向后台传递参数时,页面一直显示错误400 bad request. 出现这个问题的原因是,要传递的VO类里一个实体bean里面的两个字段名称与前台表单序列化之后的name名称不匹配. 解决 ...

  8. LAMP 搭建练习

    目录 LAMP 搭建 1:CentOS 7, lamp (module): http + php + phpMyAdmin + wordpress 192.168.1.7 配置虚拟主机 xcache ...

  9. PHP 工厂模式介绍

    工厂模式,顾名思义,如同工厂一样,你把原材料放入工厂中,出来的是成品,而你并不需要知道工厂里做了什么.代码中也类似,把主要参数放入一个工厂里,返回的是处理好的数据,我们并不需要工厂里做了什么,只需要知 ...

  10. 零基础快速掌握Python系统管理视频课程【猎豹网校】

    点击了解更多Python课程>>> 零基础快速掌握Python系统管理视频课程[猎豹网校] 课程目录 01.第01章 Python简介.mp4 02.第02章 IPython基础.m ...