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. [易语言][ExDui][Tutorial]0.Hello,world!

    原创博客,请勿在未经授权的情况下转载. At the Beginning... 由于近期爱好摸鱼,并且对Gui开发萌生一丝兴趣.在尝试WPF被虐,使用Qt却不太喜欢整套庞大的框架后-- I choos ...

  2. MySQL复制(一)--复制概述

    MySQL复制(replication)文档集合:1.复制概述2.基于二进制日志文件位置(binlog)配置复制3.基于全局事物标识符(GTID)配置复制4.多源复制5.级联复制6.半同步复制7.延迟 ...

  3. php 实现店铺装修7

    type_id=0的情况 type_id=1的情况                         type_id=2的情况 /** * @title 店铺装修--商品分类 * @param type ...

  4. SciPy k均值聚类

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  5. POJ 2386 Lake Counting 八方向棋盘搜索

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 53301   Accepted: 26062 D ...

  6. python编写banner获取的常用模块

    模块的概念:模块也叫库,每个模块中都内置了大量的功能和函数.类和变量.它就像是积木,可以根据需要进行调用组合.模块就是程序,每个模块就是一个后缀为.py的Python程序.Python的模块分为标准模 ...

  7. 洛谷 P1929 迷之阶梯

    题目传送门 解题思路: f[i]表示跳到第i层的最少移动次数,如果可以从下面一级跳上来,那么直接跳上来,如果跳不上来,那就往后退,退到不能退或能跳上第i层 AC代码: #include<iost ...

  8. vue - 子组件向父组件 传递方法和参数

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

  9. 富文本API

    这个笔记来自网络资料的总结 简书大佬三省吾身_9862 tuobaye个人博客 富文本有相关3个API和一个新属性 var selection = window.getSelection(); var ...

  10. Day4 - I - Trucking HDU - 2962

    A certain local trucking company would like to transport some goods on a cargo truck from one place ...