每天一点点之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 ...
随机推荐
- sql语句中,传入的参数带单引号的问题
今天在大批量操作数据时,遇到此问题,解决如下: if(cateName.indexOf("'")!=-1){ oql = " select * where name = ...
- java 学习地址
数组 JAVA中数组排序小结 Java中ArrayList和LinkedList区别 在往里面插入数据时.LinkedList会比ArrayList快很多,因为前者仅仅做了一个类型的插入,而后者 ...
- windows下用libevent 开发一个echo服务
#include <stdio.h> #include <string.h> #include <errno.h> #include <iostream> ...
- Mybatis入门(四)配置别名(二)
这一章我们练习一下Mybatis的别名,这大大的提高了我们的开发效率 类型别名(typeAliases) 类型别名是为 Java 类型设置一个短的名字. 它只和 XML 配置有关,作用在于用来减少类完 ...
- Time Series_1_BRKA Case
Berkshire Hathaway (The most expensive stock ever in the world) 1.1 Download data require(quantmod) ...
- 前端学习笔记系列一:4 vue中@click.native
.native - listen for a native event on the root element of component. 作用:[给组件绑定原生事件] 例子:如果使用router-l ...
- 通过注册码破解IntelliJ IDEA
把激活码填入下面的地方即可.如果不知道在哪里,那么就选菜单栏里的help再选Register就会弹出下面的界面 激活码网址里面有 lookdiv.com 里面的钥匙就是lookdiv.com
- 无需重新编译安装PHP扩展的方法
转自:https://www.jianshu.com/p/ae3c17b0f126 PHP扩展模块通常有两种: PHP官方扩展.如果php通过源码安装(php7),安装的时候未开启,而后来需要开启某个 ...
- 第十届蓝桥杯 RSA解密(C++/ java)
一道不错的题目,借鉴了网上的代码,用了拓展欧几里得算法求逆元,再用快速乘求每次a的余数,再快速幂对余数进行幂运算. #include <bits/stdc++.h> using names ...
- xcode windows版安装使用教程
随着iPhone.iPad.Mac等苹果产品越来越火爆,越来越多的初学者想要了解和尝试苹果平台,包括苹果操作系统Mac OS X.苹果演示软件Keynote.苹果开发工具Xcode等.然而,苹果电脑价 ...