有时候我们需要页面滚动条滚动到某一固定的位置,一般使用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. kmp算法基础

    https://www.luogu.com.cn/problemnew/solution/P3375 #include<bits/stdc++.h> using namespace std ...

  2. python-调用自己写的函数

    在同一个目录下的话,直接在代码里添加即可,下面的例子. 同一个目录下有以下: aaa.py ccc.py ddd.py   想在ddd.py里用aaa.py里的函数,就在ddd.py里面开关位置添加 ...

  3. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  4. 深入理解JDK、JRE(两套)、JVM、以及不同目录下的java.exe

    内容来自:http://blog.sina.com.cn/s/blog_7ffb8dd501011sgc.html 1.jdk下bin目录里的java.exe与外部jre中的java.exe的秘密   ...

  5. PHP 源码 —— is_array 函数源码分析

    is_array 函数源码分析 本文首发于 https://github.com/suhanyujie/learn-computer/blob/master/src/function/array/is ...

  6. 微信个人支付接口---YunGouOS 1.1.3 版本发布,新增个人微信/支付宝收款接口

    软件接口  https://www.oschina.net/news/113305/yungouos-1-1-3-released 文档说明  https://www.oschina.net/p/Yu ...

  7. Go_栈

    1. 栈的介绍 2. 栈的应用 3. 栈入门 package main import ( "fmt" "errors" ) //使用数组来模拟一个栈的使用 ty ...

  8. 【C语言】分别用下标法,地址法和指针法输出数组中的全部元素

    #include<stdio.h> int main() { ] = { ,,,, }; int i, * p; printf("下标法:\n"); ; i < ...

  9. Django - 美化显示request.META

    def index(request): values = request.META.items() html = [] for k, v in values: html.append('<tr& ...

  10. Caused by: com.fasterxml.jackson.databind.exc.InvalidDefinitionException

    实体类缺少无参构造方法,序列化对象需要无参构造方法 @NoArgsConstructor