有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法。

语法就是:scrollTo(xpos,ypos)

xpos:必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos:必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

例如滚动内容的坐标位置100,500:

window.scrollTo(100,500);

解决办法:

在 Vue项目的main.js文件中加入以下代码即可解决:

router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})

以上就是针对页面显示没有在顶部的问题的解决办法,希望对大家有所帮助。

参考: https://blog.csdn.net/wandoumm/article/details/80199191

解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题的更多相关文章

  1. 打开jsp页面时,显示空白页。

    打开jsp页面时,显示空白页.   #foreach($e in $listPlanItem)          #set($listPlanDetail=$!e.get(2))        < ...

  2. vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置

    官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...

  3. vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...

  4. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  5. IOS 获取系统相册和拍照使用HXPhotoPicker 返回页面时页面上移被nav遮住问题

    解决: - (void)viewWillAppear:(BOOL)animated{    [super viewWillAppear:animated]; self.automaticallyAdj ...

  6. Portal系统中当切换学生时仍旧停留在当前页面的实现方法

    一.BaseController.cs文件 1.OnActionExecuting方法,该方法可以被各子Controller重写 protected override void OnActionExe ...

  7. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  8. VUE如何实现切换页面时的过渡动画?

    最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...

  9. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

随机推荐

  1. golang中的net/rpc包

    本文先介绍RPC,然后go原生对RPC的使用,之后是介绍go语言中有哪些RPC框架以及一些其他常见的框架,最后是探究go语言中rpc的源码. (1)首先介绍下什么RPC? (2)RPC可以做什么? ( ...

  2. 安装Elasticsearch出现 node validation exception 的问题处理

    es报错如下: [2019-10-11T16:23:28,945][ERROR][o.e.b.Bootstrap ] [es-node-1] node validation exception[3] ...

  3. HTML学习(5)标题、水平线、注释

    HTML 标题 标题(Heading)是通过 <h1> - <h6> 标签进行定义的. <h1> 定义最大的标题. <h6> 定义最小的标题. 注: 浏 ...

  4. xv6 trapframe定义的位置

    在x86.h的最下面,真是把我找吐了,MD

  5. Qt5 error LNK2019 无法解析的外部符号的解决办法

    今天在使用Qt Create 4.5.2时遇到一个莫名其妙的问题: 在原有工程里添加一个新类(有界面的),在调用的mainwindow.cpp中添加#include "a.h",然 ...

  6. pycharm的一些快捷键[转]

    编辑类: Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 类名完成Ctrl + Shift + Enter 语句完成Ctrl + P 参数信息(在方法中 ...

  7. linux下安装keepalived

    keepalived安装文档 1. 安装环境 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y instal ...

  8. 10day rpm简单用法qa ql qf "`"用法

    查看软件是否安装: [root@oldboyedu ~]# rpm -qa sl -q表示查询 -a表示所有 sl-5.02-1.el7.x86_64 查看软件包中有哪些信息 [root@oldboy ...

  9. 08day 操作命令以及目录结构

    yum /var/log目录(日志文件)两个重要目录:message--记录系统或服务程序运行状态信息 secure--记录用户登录信息 tail -f 查看日志方法    head 查问文件头部

  10. python之nosetest

    nose介绍 nose下载 nose使用 -s 能够打印用例中的print信息 ➜ func_tests git:(master) ✗ nosetests -v test_app.py:TestApp ...