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切换页面时自动滚动到顶部的方法的更多相关文章

  1. vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) ...

  2. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  3. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  4. Vue Spa切换页面时更改标题

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet. ...

  5. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  6. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  7. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  8. 如何在webpack开发中利用vue框架使用ES6中提供的新语法

    在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...

  9. 只会Vue怎么开发小程序?vue和微信小程序的到底有哪些区别?

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张生命周期图对比下: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. v ...

随机推荐

  1. linux修改键盘按键

    我的电脑:Fedora-19 $ uname -a Linux localhost.localdomain 3.11.10-200.fc19.i686 #1 SMP Mon Dec 2 20:48:2 ...

  2. webpack配置自动打包重新运行npm run dev出现报错

    webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...

  3. 7专题总结-高频题high frequency

    Outline . Single Number I, II, III . Majority Number I, II, III . Best Time to Buy and Sale Stock I, ...

  4. 「NOIP2017」列队

    传送门 Luogu 解题思路 一眼平衡树,应该没问题吧? 但我们一定要反应过来,单点的维护是非常之困难的,因为这是一个网格图而不仅仅是一条序列. 我们要考虑把修改操作全都放在序列上进行. 其实题面里是 ...

  5. 【rabbitmq】Queueingconsumer被废止后老代码如何做的解决方案

    amqp-client 3.x之前的rabbitmq版本有个消费者的写法是借助于Queueingconsumer的: QueueingConsumer consumer = new QueueingC ...

  6. bootstrap点击下拉菜单没反应

    出现这个问题一般就涉及 网页脚本的问题 好好看看自己网页 scripts 编写是否正确 也可以通过浏览器的 F12 进入console 控制台看看是什么问题 总的来说 该错误要从网页脚本编写的问题出发 ...

  7. open-source--攻防世界

    题目直接给了源码,发现只要跳过条件就可以得到flag

  8. Express 应用程序生成器

    通过应用生成器工具 express-generator 可以快速创建一个应用的骨架. express-generator 包含了 express 命令行工具.通过如下命令即可安装: $ npm ins ...

  9. R 《回归分析与线性统计模型》page141,5.2

    rm(list = ls()) library(car) library(MASS) library(openxlsx) A = read.xlsx("data141.xlsx") ...

  10. [Luogu][P2458] [SDOI2006]保安站岗

    题目链接 看起来似乎跟最小点覆盖有点像.但区别在于: 最小点覆盖要求所有边在其中,而本题要求所有点在其中. 即:一个点不选时,它的儿子不一定需要全选. 画图理解: 对于这样一幅图,本题中可以这样选择: ...