每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法
1. 在main.js入口文件中写入
//路由跳转后,页面回到顶部
router.afterEach(() => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
位置如下:

2. 还可以在实例router对象的时候设置
export default new Router({
mode: 'hash',
// base: '/dist/',
scrollBehavior: () => ({ y: 0 }), //路由跳转后页面回到顶部
routes: []
})
参考链接:https://blog.csdn.net/csl125/article/details/83996314
每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法的更多相关文章
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- Vue Spa切换页面时更改标题
在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet. ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- Vue切换页面时中断axios请求
一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...
- 每天一点点之vue框架开发 - vue坑-This relative module was not found
94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...
- 如何在webpack开发中利用vue框架使用ES6中提供的新语法
在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...
- 只会Vue怎么开发小程序?vue和微信小程序的到底有哪些区别?
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张生命周期图对比下: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. v ...
随机推荐
- SpringBoot集成百度UEditor图片上传后直接访问404解决办法
SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...
- 073、Java面向对象之利用构造方法为属性赋值
01.代码如下: package TIANPAN; class Book { // 定义一个新的类 private String title; // 书的名字 private double price ...
- Html5使用audio播放音乐
html代码 <audio id="myaudio" src="http://ws.stream.qqmusic.qq.com/C100003R74Cn0JR4O ...
- intel关于spark gc的优化建议
Apache Spark由于其出色的性能.简单的接口和丰富的分析和计算库而获得了广泛的行业应用.与大数据生态系统中的许多项目一样,Spark在Java虚拟机(JVM)上运行.因为Spark可以在内存中 ...
- QEMU 运行uboot,动态加载内核与文件系统
背景 上一讲我们完成了 编译 QEMU 以及简单地做了仿真.这一讲在 启动uboot 的基础上进行,以加强对于 运行地址,加载地址等理解. 有关资料: uboot 与 代码重定位 有这样的约定,ubo ...
- git 的那点东西,随心记
目前常用的项目版本管理,协同开发的工具有SVN和GIT,本次就记录一下GIT的基本使用. git下载地址:https://git-scm.com/downloads *根据自己的操作系统进行选择(这里 ...
- 007.CI4框架CodeIgniter, 加载自己的helper辅助类,调用自己helper中定义各种全局函数
01. 我们在Helpers文件中创建一个Tx_helper.php的文件,里面就下一个函数 <?php //输出 function ShowMessage($AMsg) { echo &quo ...
- Google的搜索API的Delphi封装
这个东西实现了已经有一段时间了,那个时候谷歌还没有退出中国内地呢!而现在呢,谷歌都退了有一些日子了!紧以此纪念一番! 话说谷歌API,我相信很多人应该都知道!不晓得在实际应用中,用的人多不多(我说的不 ...
- Problem J. Joseph’s Problem 约瑟夫问题--余数之和
链接:https://vjudge.net/problem/UVA-1363 题意:给出n k,当 i 属于 1~n 时 ,求解 n% i 的和 n 和 k 的范围都是 1 到 10^9; 商相同 ...
- UVA - 225 Golygons (黄金图形)(回溯)
题意:平面有k个障碍点.从(0,0)出发,第一次走1个单位,……,第n次走n个单位,恰好回到(0,0),每次必须转弯90°,图形可以自交,但不能经过障碍点.按字典序输出所有移动序列,并输出序列总数. ...