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. Oracle 自动生成hive建表语句

    从 oracle 数据库导数到到 hive 大数据平台,需要按照大数据平台的数据规范,重新生成建表的 SQL 语句,方便其间,写了一个自动生成SQL的存储过程. ① 创建一张表,用来存储源表的结构,以 ...

  2. 当GetWindowText获取不到标题时可以用SendMessage

    GetWindowText所有父窗口标题基本可以获取到, 但是当获取父窗口下的子窗口控件标题文本时有时候就没那么好用了, 这个时候可以通过SendMessage发送消息来获取,也很简单,C/C++代码 ...

  3. Mysql5.7自定义函数递归报错1424 Recursive stored functions and triggers are not allowed

    示例: DELIMITER $$CREATE FUNCTION test(countnum INT)RETURNS INT DETERMINISTICBEGINDECLARE tempnum INT ...

  4. 使用VUE开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

  5. Vue2.0--14.小白入门教程--实例化多个vue对象,可初始化操作几种方法

    课程地址: https://study.163.com/course/courseMain.htm?courseId=1004711010 <!DOCTYPE html> <html ...

  6. 校内考试之zay与银临(day1)

    T1大美江湖(洛谷P5006) zayの题解: 这个题的本质是模拟 不过有卡ceil的地方 ceil是对一个double进行向上取整,而对于int/int来说,返回值是int 举个生动的栗子 ceil ...

  7. WPF实现QQ群文件列表动画(二)

    上篇(WPF实现QQ群文件列表动画(一))介绍了WPF实现QQ群文件列表动画的大致思路,结合我之前讲过的WPF里ItemsControl的分组实现,实现起来问题不大,以下是效果图: 其实就是个List ...

  8. P2255 [USACO14JAN]记录奥林比克Recording the M…

    P2255 [USACO14JAN]记录奥林比克Recording the M… 题目描述 Being a fan of all cold-weather sports (especially tho ...

  9. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 19: ordinal not in range(128)

    解决方案: 1: 在网上找到的解决方案是: 在调用import matplotlib.pyplot as plt前 import sys sys.setdefaultencoding(“gbk”) 让 ...

  10. 【Partition List】cpp

    题目: Given a linked list and a value x, partition it such that all nodes less than x come before node ...