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. redis学习笔记-04:redis五大数据结构类型

    redis的命令大全网站:http://redisdoc.com/ 一.redis五大数据类型 1.String(字符串).Hash(哈希,类似Java里的Map).List(列表).Set(集合)和 ...

  2. [GoogleInterview]连续子序列问题

    Before the Beginning 本文为 Clouder 原创文章,原文链接为 https://www.codein.icu/gci-subarray/,转载时请将本段放在文章开头显眼处.如进 ...

  3. 通过注册码破解IntelliJ IDEA

    把激活码填入下面的地方即可.如果不知道在哪里,那么就选菜单栏里的help再选Register就会弹出下面的界面 激活码网址里面有 lookdiv.com 里面的钥匙就是lookdiv.com

  4. 数据库同步和使用JSONObject让Java Bean“原地满状态复活”

    分类: [java]2013-11-28 21:04 729人阅读 评论(0) 收藏 举报 简介我为什么写这样一个简单的问题呢?首先介绍一下项目背景.最近需要做一个数据库同步的工作,也就是一个Web程 ...

  5. pytho 基本数据类型

    1.字符串(引号) name = "........."  双引号引出来的都是字符串 name = """.........""& ...

  6. Ubuntu 移植 ffmpeg + x264

    背景 直接编译移植的ffmpeg是与 arm-linux 下类似的. 详情参考: arm linux 移植 FFMPEG库 + x264 host平台 :Ubuntu 16.04 x264 :2017 ...

  7. Rabbitmq与spring整合之重要组件介绍——AMQP声明式配置&RabbitTemplate组件

    上一节是使用rabbitAdmin的管理组件进行声明队列,交换器,绑定等操作,本节则是采用AMQP声明式配置来声明这些东西.AMQP声明主要是通过@Bean注解进行的. 配置: package com ...

  8. python matplotlib绘图/sklearn包--make_blobs()

    1.make_bolbs() 函数 from sklearn.datasets.samples_generator import make_blobs import numpy as np impor ...

  9. hook框架frida的安装以及简单实用案例

    1.下载地址 https://github.co/frida/frida/releases 2.另外两种安装方法 1.Install from prebuilt binaries This is th ...

  10. 春运到了,带你用python来抢票回家!

    不知不觉,一年一度的春运抢票大幕已经拉开,想快速抢到回家的车票吗?作为程序员,这些技术手段,你一定要知道. 为了让大家更快捷更便利的抢火车票,各种各样的抢票软件应需而生,这类软件大部分都是付费抢票的机 ...