有时候我们需要页面滚动条滚动到某一固定的位置,一般使用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. Flink系统配置

    Flink 系统配置 Flink 提供了多个配置参数,用于调整Flink的行为与性能,所有参数均在flink-config.yaml 文件中.下面我们介绍一下几个主要配置. Java and Clas ...

  2. D. Mahmoud and Ehab and another array construction task 因子分界模板+贪心+数学

    D. Mahmoud and Ehab and another array construction task 因子分解模板 题意 给出一个原序列a 找出一个字典序大于a的序列b,使得任意 \(i!= ...

  3. 当用命令导入csv文件时提示错误[Err] 1290 - The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

        安装之后没有my.ini配置文件怎么办,因为自己安装的是zip压缩版的mysql,所以再5.7之后就没有my.ini配置文件,所以有时候需要去自己创建一个叫my.ini的配置文件,但是特别 要 ...

  4. 【网易官方】极客战记(codecombat)攻略-地牢-逃脱

    关卡连接: https://codecombat.163.com/play/level/breakout 矮人正在追你,前方道路已被堵死. 简介: 通过攻击 "弱门" 释放盟友,这 ...

  5. CI框架发送邮件(带附件)

    最近写了一个发送带附件的邮件,发邮件挺简单的,在我这里最重要的是遇到问题,哈哈哈哈 1.主要方法看代码 public function send_mail(){ $this->load-> ...

  6. Django框架-模板层

    Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...

  7. ALSA driver--PCM实例创建框架

    在介绍PCM 之前,我们先给出创建PCM实例的框架. #include <sound/pcm.h> .... /* hardware definition */ static struct ...

  8. PHP基础学习笔记1

    一.基本语法 1.1 形式 PHP 脚本以 <?php 开始,以 ?> 结束: <?php //php代码 ?> 1.2 注释 单行注释 //这是单行注释 多行注释 /* 这是 ...

  9. springboot+mybatis报错Invalid bound statement (not found)

    今天做项目时报了一个错提示说Invalid bound statement (not found),也就是说mapper接口绑定.xml文件出错了,找不到指定的sql:原因是程序没有把.xml文件编译 ...

  10. 分段函数&数学函数

    本题要求计算下列分段函数f(x)的值(x为从键盘输入的一个任意实数): 输入格式: 直接输入一个实数x 输出格式: 在一行中按“f(x)=result”的格式输出,其中x与result都保留三位小数. ...