解决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路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
随机推荐
- How to make mail more effectively?
1.What does your reader need to know? 2.What does your reader know already? 3.Will your reader be ab ...
- koa2第一天 安装koa2found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
安装全局koa2:npm install -g koa2 -generator 创建一个koa2文件夹:koa2 -e koa2 进入koa2文件夹:cd koa2 安装npm模块:npm insta ...
- 【游戏体验】FlyGuy(小飞人)
关于FlyGuy这款游戏:https://en.wikipedia.org/wiki/Fly_Guy_(video_game) 这款游戏可以说是古董了 游戏的自由度比较高,玩法简单. 个人测评 游戏性 ...
- 使用maven构建项目时,SSM和springboot项目的打包与云服务器部署
下面讲讲如何打包SSM和springboot项目,并部署到云服务器上. 由于使用的IDE不同,有的使用eclipse,有的使用idea,所以如果在IDE中按照 maven clean 再 maven ...
- CI框架发送邮件(带附件)
最近写了一个发送带附件的邮件,发邮件挺简单的,在我这里最重要的是遇到问题,哈哈哈哈 1.主要方法看代码 public function send_mail(){ $this->load-> ...
- 吴裕雄 python 机器学习——集成学习随机森林RandomForestRegressor回归模型
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...
- vs查看动态库依赖
dumpbin是VS自带的工具,进入Visual Studio 的命令提示 查看程序或动态库所依赖的动态库 dumpbin /dependents abc.exe 查看动态库的输出函数 dumpbi ...
- STA之RC网
STA的主要工作是计算电路网络的延时,如今的电路网络还是由CMOS cell和net组成的,所以STA所要计算的延时仍是电容的充放电时间.等量子计算机普及的时候,如今的这一套理论都将随着科技的进步被丢 ...
- 妙用python之编码转换
转自i春秋 文章难易度:★★ 知识点:python.编码转换 前 言 在日常渗透,漏洞挖掘,甚至是CTF比赛中,会遇到各种编码,常常伴随着这些编码之间的各种转换.记得刚入门那个时候,自己处理编码转换问 ...
- mybatis用mysql数据库自增主键,插入一条记录返回新增记录的自增主键ID
今天在敲代码的时候遇到一个问题,就是往数据库里插入一条记录后需要返回这个新增记录的ID(自增主键), 公司框架用的是mybatis的通用Mapper接口,里面的插入方法貌似是不能把新纪录的ID回填到对 ...