解决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路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
随机推荐
- IDEAVIM 常用快捷键总结和使用说明
---title: ideavim常用快捷键总结和使用tags: grammar_cjkRuby: true--- #### `待办` ideavim用于编程的常用快捷键说明 常用快捷键 插入(光标前 ...
- response下载csv文件内容乱码问题
response下载csv文件内容乱码问题 解决办法:在输出流语句第一行输出 out.write(new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF}); Se ...
- 算法_hdoj_1003
question: Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- Windows下PHP安装 Imagick 扩展
1.下载拓展下载地址一: http://windows.php.net/downloads/pecl/releases/imagick/下载地址二: https://pecl.php.net/pack ...
- centos 安装mindoc 二进制安装
自建 文档管理系统或者说 wiki系统 mindoc官网: https://www.iminho.me/#%E6%BC%94%E7%A4%BA mindoc github页面:https://gith ...
- js实现左右自动滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Redis05——Redis五大数据类型 String
String String是Redis最基本的数据类型(较常用),一个key对应一个value string类型是二进制安全的,Redis的string可以包含任何数据 一个Redis中字符串valu ...
- C语言程序的错误和警告
一段C语言代码,在编译.链接和运行的各个阶段都可能会出现问题.编译器只能检查编译和链接阶段出现的问题,而可执行程序已经脱离了编译器,运行阶段出现问题编译器是无能为力的. 如果我们编写的代码正确,运行时 ...
- yii2的防御csrf攻击机制
csrf,中文名称:跨站请求伪造,可以在百度上搜索资料,详细了解这一方面的概念.对于我们是非常有帮助的.yii2的csrf的实现功能是在yii\web\request类实现功能的.request类中的 ...
- SpringBoot 开发的那些小趣事儿
经过这次在公司实习中获取到的经历,我发现确实有时候书本上的知识发挥的作用微乎其微,好像是被问题打了太极拳一样,你明明想去攻克这个地方,他却给你报了其他地方的错误. 平常的一些小项目根本就不能匹配到企业 ...