每天一点点之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 ...
随机推荐
- SSH框架结构分析
分类: 工作问题2012-03-29 18:10 1511人阅读 评论(0) 收藏 举报 框架sshhibernatespringstrutsdao 最近在弄j2ee,发现还是学到了很多东西,心情ha ...
- 二、Linux目录结构&常用指令
Linux目录结构: ps -ef:任务管理器 ifconfig: 查看ip ping : 测试与目标主机的连通性,ctrl+c停止 目录指令: ll:列出当前目录下的文件信息 ls -al : 列 ...
- 【QSBOJ】组成三位数
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 例如:三个三位数192,384,576满足以上条件. 输出 输出 ...
- vi/vim编辑器基本操作
一.vi/vim的三种模式 vi编辑器有三种模式:命令模式(command mode).插入模式(Insert mode).底行模式(last line mode). 就是你直接用命令(vi 文件名 ...
- Excel的查询函数vlookup和index使用
需求 有一些省市的区县,有600多条数据,只有名称,没有编码.现在要根据名称去3000多条数据里面查询. 如图,拿出一部分数据来演示 vlookup 使用vlookup,由于vlookup只能查询数据 ...
- CLion的使用
配置远程Linux编译器 实现目标:1.将项目中的源码和target和Linux服务器同步.2.代码在服务器端运行 配置ToolChains setting -> Build,Execution ...
- H5易企秀
周末被领导叫回来加班,说要做一个易企秀一样的页面,然后就有这篇笔记 原计划用几百个计时器去执行,后面放弃了,太难改了,还是选择了animate.css插件,这是一个纯css的插件,只需要引入css就行 ...
- 整理jvm概念和原理详解以及gc机制
注:源代码就是.java文件,JVM字节码就是.class文件 1. Java 堆(Java Heap):(1)是Java虚拟机所管理的内存中最大的一块.(2)在虚拟机启动的时候创建.堆是jvm所有线 ...
- docker安装并设置开机启动(Linux)
docker 开机启动: systemctl enable docker 使用的linux系统为CentOS7.2 docker分为CE和EE版本,EE版本收费,一般我们使用CE版本就满足要求了 do ...
- centos7下安装ansible
由于centos7预装了python,因此我们可以跳过python的安装环节(记得关闭防火墙) [root@model ~]# [root@model ~]# python --version Pyt ...