解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用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切换页面时 页面显示没有在顶部的问题的更多相关文章
- 打开jsp页面时,显示空白页。
打开jsp页面时,显示空白页. #foreach($e in $listPlanItem) #set($listPlanDetail=$!e.get(2)) < ...
- vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- IOS 获取系统相册和拍照使用HXPhotoPicker 返回页面时页面上移被nav遮住问题
解决: - (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; self.automaticallyAdj ...
- Portal系统中当切换学生时仍旧停留在当前页面的实现方法
一.BaseController.cs文件 1.OnActionExecuting方法,该方法可以被各子Controller重写 protected override void OnActionExe ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- VUE如何实现切换页面时的过渡动画?
最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
随机推荐
- Java爬虫学习(2)之用对象保存文件demo(1)
package com.mieba.spider; import java.util.ArrayList; import java.util.List; import java.util.Vector ...
- access denied (2)
除了https://www.cnblogs.com/bneglect/p/11558593.html 这里提到的以外,今天再记录一个新的原因造成这种情况的解决方法.path_info 这个算是路由模 ...
- 2019牛客多校第四场A meeting 思维
meeting 题意 一个树上有若干点上有人,找出一个集合点,使得所有人都到达这个点的时间最短(无碰撞) 思路 就是找树的直径,找直径的时候记得要找有人的点 #include<bits/stdc ...
- intellij idea设置打开多个文件显示在多行tab上
- 网关集成Swagger出现404错误
原因是忘了在需要生成api的类上加入注解 @EnableSwagger2Doc
- python 递归调用 返回值问题
当使用递归时并有返回值时,调用自身函数时需要加上return语句如下: def daxiao(biao1,biao2): #判断两个列表的大小,根据里面的元素大小 #如果biao1大于 ...
- 计算几何-Dot-Vector
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 看了书,然后码 ...
- CLR处理损坏状态的异常
你有没有写过不太正确但足够接近的代码?当一切顺利的时候,你是否不得不编写运行良好的代码,但是你不太确定当出了问题时会发生什么?有一个简单的.不正确的语句可能位于您编写或必须维护的代码中:catch ( ...
- 高内存 高CPU 劣质网络下的测试
内存 先把系统的虚拟内存去掉 (右键我的电脑属性里有的.选择那个无分页文件 虚拟内存在任务管理器就不显示了), 然后机子本身内存不高,开几个网页就满了 CPU cpu可以用鲁大师测试cpu ...
- PHP 代码内执行Linux命令
还是那个问题,就是那个php填写pdf表单,因为副武器的原因,改用命令执行了,哎,一个问题好多知识点啊,先来说说PHP执行linux命令,其实挺简单的,但是呢,后面说说我遇到的问题 1.PHP执行命令 ...