解决vue单页路由跳转后scrollTop的问题


Posted in Javascript onSeptember 03, 2018

作为vue的初级使用者,在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部。

最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了。最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码

router.afterEach(function (to) {
 window.scrollTo(0, 0)
})

路由跳转后就不会出现滚动的问题了。

但是这种做法是不友好的,我们可以使用scrollBehavior (to, from, savedPosition) {}来解决问题。

在我们写路由的时候做个处理,如下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
 
Vue.use(Router)
 
export default new Router({
 routes: [
 {
  path: '/',
  name: 'HelloWorld',
  component: resolve => require(['../components/HelloWorld.vue'],resolve)
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
 }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。它的使用有很多种,可以试试。

以上这篇解决vue单页路由跳转后scrollTop的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
You might like
Php获取金书网的书名的实现代码
2010/06/11 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
php适配器模式简单应用示例
2019/10/23 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JS hashMap实例详解
2016/05/26 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue实现循环切换动画
2018/10/17 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python对excel文档去重及求和的实例
2018/04/18 Python
在python里从协程返回一个值的示例
2019/02/19 Python
python基础梳理(一)(推荐)
2019/04/06 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
入门学习Go的基本语法
2021/07/07 Golang
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP