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. struts2--action请求与Action类

    1.action:代表一个sturts2的请求: 2.Action类:能够处理Struts2请求的类: --属性名必须遵守与JavaBean属性名相同的命名规则: --属性的类型可以使任意类型.从字符 ...

  2. ActivePerl 安装

    下载 https://www.activestate.com/products/activeperl/downloads/ 链接:https://pan.baidu.com/s/1IXPdYFd5bD ...

  3. 机器学习(ML)十一之CNN各种模型

    深度卷积神经网络(AlexNet) 在LeNet提出后的将近20年里,神经网络一度被其他机器学习方法超越,如支持向量机.虽然LeNet可以在早期的小数据集上取得好的成绩,但是在更大的真实数据集上的表现 ...

  4. 关于fpga的后仿真重要性

    也许你天天做些fpga,写完代码就直接编译成功,锁定引脚后,马上使用signaltaII软件. 也许你一天,你发现signaltapII看信号的痛苦,一个源代码文件修改一点,要花个20分钟编译一次. ...

  5. 手写MQ框架(四)-使用netty改造梳理

    一.背景 书接上文手写MQ框架(三)-客户端实现,前面通过web的形式实现了mq的服务端和客户端,现在计划使用netty来改造一下.前段时间学习了一下netty的使用(https://www.w3cs ...

  6. hibernate部分源码解析and解决工作上关于hibernate的一个问题例子(包含oracle中新建表为何列名全转为大写且通过hibernate取数时如何不用再次遍历将列名(key)值转为小写)

    最近在研究系统启动时将数据加载到内存非常耗时,想着是否有办法优化!经过日志打印测试发现查询时间(查询时间:将数据库数据查询到系统中并转为List<Map>或List<*.Class& ...

  7. springboot项目启动报错 Failed to configure a DataSource: 'url' attribute is not specified and no embedde

    参考:https://blog.csdn.net/Coyotess/article/details/80637837

  8. 当3D打影人头”成为黑客的秘密武器,隐私该如何保护?

    在<碟中谍>系列电影中,除了超级敬业又帅气的阿汤哥之外,最让人津津乐道的桥段就是用3D打印做出来的"人头".通过这些惟妙惟肖的"人头",阿汤哥完成了 ...

  9. vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递

    1,子子组件  TodoItem.vue     <template>   <div class="todo-item" :class="{'is-co ...

  10. python 聚类分析 k均值算法

    dataSet = [ #数据集 # 1 [0.697, 0.460], # 2 [0.774, 0.376], # 3 [0.634, 0.264], # 4 [0.608, 0.318], # 5 ...