解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者,在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部

 

在我们写路由的时候做个处理,如下:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: resolve => require(['../components/HelloWorld.vue'],resolve)}],scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}}
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。它的使用有很多种,可以试试。

以上这篇解决vue单页路由跳转后scrollTop的问题就是小熊分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小熊我,有问题也提出来

转载于:https://www.cnblogs.com/520BigBear/p/10042222.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xcode 8带来的新特性和坑

这么晚还写这些,主要是有些东西以前没用到,最近使用到,所以写下算做个记录吧。 ##正文 ###Interface Builder Xcode6中在原有的Auto layout的基础上,添加了Size Classes新特性,通过这个新特性可以使用一个XIB或者SB文件…

计算机网络拓跋结构,实战 | 服务端开发与计算机网络结合的完美案例

前言大家好,我是阿秀后端,可以说是仅次于算法岗之外竞争最为激烈的岗位,而其中的服务端开发也是很多人会选择在秋招中投递的一个岗位,我想对于很多人来说,走上服务端开发之路的起点就是一个回声服务器了。今天带大家实…

pcu tps_Mac版Microsoft Office 2011重新定义您的TPS报告体验

pcu tpsOffice 2011 for Mac is going to be released in a couple of days, and we got our hands on the latest version already. Here’s a quick tour of some of the new features in the latest version of Office. Mac版Office 2011将在几天内发布,我们已经…

【转载】intellij idea如何将web项目打成war包

1、点击【File】->【Project Structure】菜单(或使用ShiftCtrlAltS快捷键),打开【Project Structure】窗口。如下图: 2、在【ProjectStructure】中选择左侧的【Artifacts】页签。如下图: 3、点击中间上面的&#xf…

形容计算机老师风采的句子,关于老师的句子

Tips:点击图片进入下一页或下一篇图有一种光荣的职业,叫老师;有一种难忘的情结,是老师;有一种最美的祝愿,送老师。以下是关于老师的句子,希望大家能喜欢。1、一只粉笔两袖清风,三尺讲台四季耕耘&#xff0c…

一个小技巧 禁止浏览器弹出Alert

有的时候我们可能不太需要弹出凡人的Alert窗口,这个时候就要想办法去禁止浏览器弹出这个东西.那么如何禁止呢? 其实很简单的辣,看下面的代码,一点点代码轻松搞定. <script LANGUAGE"JavaScript">//这样做就禁止了alert的弹窗window.alert function(str){retu…

蓝牙 唤醒计算机_如何防止计算机意外唤醒

蓝牙 唤醒计算机Putting your PC to sleep is a great way to save energy while still making sure you can resume work quickly. But what can you do if your PC keeps waking up on its own? Here’s how to figure out what’s waking it up, and how to prevent it. 使…

EF学习目录

EF EF性能优化 EF延迟加载LazyLoading EF相关报错 EF 事务 Entity相互关系 Entity种类&#xff08;动态代理&#xff09; DbContext Entity States Code First Code First 连接已有数据库 DB First 生成EF后修改最大长度限制等 更新EF&#xff08;更新表 添加表…&#xff09; …

ppt 计算机图标不见了,我PPT的图标变成这样了,为什么

公告&#xff1a; 为响应国家净网行动&#xff0c;部分内容已经删除&#xff0c;感谢读者理解。话题&#xff1a;我PPT的图标变成这样了,为什么&#xff1f;怎么变回去&#xff1f;回答&#xff1a;软件坏了或者被误删不支持PPT格式了&#xff0c;重装一下就能支持了话题&#…

HDFS常用操作命令

创建目录&#xff0c;示例&#xff1a;bin/hadoop dfs -mkdir /data/root/test;列出目录清单&#xff0c;示例&#xff1a;bin/hadoop dfs -ls /data/root;删除文件或目录&#xff0c;示例&#xff1a;bin/hadoop fs -rmr /data/root/test;上传文件&#xff0c;示例&#xff1a…

设计模式-系列索引

园子里面有太多优秀的设计模式文章了&#xff0c;但是可能每个人的出发角度和关注点不同&#xff0c;可能会对每个模式理解的角度和切面不同&#xff0c;我想以我自己理解的方式来跟大家共同探讨下常用的设计模式&#xff0c;并且我会结合工作中的开发实际场景来说明每个模式的…

如何使Flash在Internet Explorer的64位版本中工作

You’re using the 64-bit version of IE 9 Beta and attempt to watch flash videos, and realize they won’t play. Here we look at fixing the problem by installing the new 64-bit version of Adobe Flash. 您正在使用IE 9 Beta的64位版本&#xff0c;并尝试观看Flash视…

h5c3 part6 flex

1. animation: name duration delay timing-function count forwards keyframes name { 0% from{ } 100% to{ } } 没有延迟 animation-fill-mode: forwards 0%动画不会立即执行, 结束时会停留在结束状态 backwards 0%动画会立即执行, 结束时不会停留在结束状态 both 0%动画会…

笔记本计算机没反应怎么办,有办法 | 耳机插进电脑没反应怎么办?

原标题&#xff1a;有办法 | 耳机插进电脑没反应怎么办&#xff1f;大家好&#xff0c;我是你们人见人爱&#xff0c;花见花开的信小工同学。今天&#xff0c;我要化身电脑维修师&#xff0c;为同学们解决电脑中那些让人“捉急”的小问题。童鞋&#xff1a;小工&#xff01;小工…

clonezilla使用_如何使用Clonezilla备份和恢复已死或即将死去的系统磁盘

clonezilla使用March 31st, 2011 is “World Backup Day”—celebrate it by using free software Clonezilla to clone an exact copy of your OS system disk, regardless if you use Windows, Mac OS, or Linux! 2011年3月31日是“世界备份日”&#xff0c;无论您使用Window…

vue之安装配置

直接上图 转载于:https://www.cnblogs.com/wdxue/p/8079349.html

浏览器显示无法解析服务器的DNS地址,使用搜狗浏览器时突然弹出无法解析服务器的DNS地址该如何处理...

导语&#xff1a;小编也是搜狗浏览器的忠实粉丝&#xff0c;但是最近在使用浏览器的时候频频出现“无法解析服务器的DNS地址”的情况。为了修复这个故障小编也耗费了很多的时间&#xff0c;最后发现只要更改一个DNS就能够轻松的解决这个问题&#xff0c;下面白豆芽就和大家分享…

基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

一&#xff1a;简介 Mint UI 包含丰富的 CSS 和 JS 组件&#xff0c;能够满足日常的移动端开发需要。通过它&#xff0c;可以快速构建出风格统一的页面&#xff0c;提升开发效率。真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件&#xff0c;无需再纠结文件体积…

linux正则表达式替换_在Linux上使用Regexxer简化正则表达式搜索/替换

linux正则表达式替换If you are tired of hacking together commands at the terminal or having to open a giant bloated IDE just to perform search and replace across a number of files, then Regexxer is the tool for you. 如果您厌倦了在终端上一起打包命令&#xff…

Java设计模式之策略设计模式

1.什么是-策略设计模式 在软件开发中常常遇到这种情况&#xff0c;实现某一个功能有多种算法或者策略&#xff0c;我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能。如查找、排序等&#xff0c;一种常用的方法是硬编码(Hard Coding)在一个类中&#xff0c;如…