解决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路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
随机推荐
- Axure 8.1.0.3377 激活码 授权码 (亲测有效)
适用版本 Axure 8.1.0.3377 zdfans.com gP5uuK2gH+iIVO3YFZwoKyxAdHpXRGNnZWN8Obntqv7++FF3pAz7dTu8B61ySxli 亲测 ...
- [蓝桥杯][基础训练]Sine之舞
Description 最近FJ为它的奶牛开设了数学分析课,FJ知道,若要学好这门课,必须有一个好的三角函数基本功. 所以他为奶牛们做了一个“Sine之舞”的游戏,寓教于乐,提高奶牛的计算能力. 不妨 ...
- Error: Invalid CSS after "xxx": expected 1 selector or at-rule, was "{}"
在VSCode中编译sass文件时,出现报错:Error: Invalid CSS after "xxx": expected 1 selector or at-rule, was ...
- POJ 3991 括号匹配问题(贪心)
I’m out of stories. For years I’ve been writing stories, some rather silly, just to make simple prob ...
- Discovering Gold lightoj 1030
一排1到n的格子,每个格子上有黄金 ai ,你最开始在 1 号,每一次投骰子决定到哪一个格子,超出1~n范围则重新投掷,你到了哪个格子就得到哪个格子的金币,问最终在n 能得到金币的期望. 思路:做题经 ...
- Eclipse使用段注释格式化代码后混乱情况解决
今天在Eclipse写代码用到段注释代码块注释一个方法,习惯使用格式化代码,结果一看格式化后的代码就乱了.就像下面那样. 觉得太乱了,而且不好对比检查.如果取消注释中间的**还保存了的,好纠结.于是就 ...
- C语言当中int,float,double,char这四个有什么区别?
区别在以下方面: 一.定义方面: 1.int为整数型,用于定义整数类型的数据 . 2.float为单精度浮点型,能准确到小数点后六位 . 3.double为双精度浮点型,能准确到小数点都十二位 . 4 ...
- KFC 小猪短租
# 分析肯德基门店信息 import requests,json post_url = 'http://www.kfc.com.cn/kfccda/ashx/GetStoreList.ashx?op= ...
- 干了这杯Java,让你的Idea比eclipse好用
1.Idea基本配置 1.1 Idea简介 Idea是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.简单的说,Idea是写代码用的工具. ...
- opencv:图像的读取,显示,写入文件
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...