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. C# 运用FileInfo类创建、删除文件

    通过FileInfo类,我们可以方便地创建出文件,并可以访问文件的属性同时还可以对文件进行打开文件.关闭文件.读写文件等基本的操作.下面的代码显示了如何创建一个文本文件并且去访问其创建时间.文件的绝对 ...

  2. java基础面试题:try{}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后?

    package com.swift; public class Try_Catch_Finally_Test { public static void main(String[] args) { /* ...

  3. Zabbix监控oracle各服务器连接数

    需求: 根据机器名查询oracle连接数,并通过zabbix进行监控 脚本: [root@rac1 Zabbix_S]# cat get_conns.py#!/usr/bin/python#codin ...

  4. mysql update 多表关联更新

    UPDATE new_schedules_spider_static_schedule s join new_scac_port p on p.`PORT` = s.`PORT` and p.SCAC ...

  5. linux常用指令学习记录

    前言 本文主要为学习贴,用来记录一些 linux上的常用指令 以供参考. 文件内容查看 cat 从上往下阅读文件内容 cat [-AbEnTv] ${FILE_NAME) cat -n /etc/is ...

  6. 初学Python不知道做什么项目好?来看看练手项目如何?

    对于初学者来说,在学习编程的初期,由于基础知识点的学习是比较无聊的,所以大家可能会有所反感,为了减弱大家的反感,我给大家带来一个简单的小项目——实现屏保计时器,这个项目就算是刚学Python的小伙伴, ...

  7. B1051 复数乘法(15 分)

    [PAT]B1051 复数乘法(15 分) - 路明天 - 博客园 https://www.cnblogs.com/hebust/p/9496809.html 在此对四舍五入输出结果做总结. 对于do ...

  8. HUD:3746-Cyclic Nacklace(补齐循环节)

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Pro ...

  9. poj 3273 分期问题 最大化最小值

    题意:将N个账款分给城M个财务期,使得每个分期账款和的值最大? 思路: 每次mid为分期账款 如果分期次数小于m说明mid太大,减上限  反正 增下限 开始下限设为 最大值 上限设为和 解决问题的代码 ...

  10. java的类加载器体系结构和双亲委派机制

    类加载器将字节码文件加载到内存中,同时在方法区中生成对应的java.land.class对象  作为外部访问方法区的入口. 类加载器的层次结构: 引导类加载器<-------------扩展类加 ...