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

 更新时间:2018年09月03日 11:54:13   作者:小雷雷哥哥  
今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

作为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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中的data,computed,methods,created,mounted用法及说明

    vue中的data,computed,methods,created,mounted用法及说明

    这篇文章主要介绍了vue中的data,computed,methods,created,mounted用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue 指令实现按钮级别权限管理功能

    Vue 指令实现按钮级别权限管理功能

    这篇文章主要介绍了Vue 指令实现按钮级别权限管理功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue实现点击展开点击收起效果

    vue实现点击展开点击收起效果

    这篇文章主要介绍了vue实现点击展开,点击收起效果,首先我们需要定义data里面的数据,使用computed对data进行处理,需要的朋友可以参考下
    2018-04-04
  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    这篇文章主要介绍了vue 数据(data)赋值问题的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-03-03
  • 如何解决ElementPlus的el-table底白线问题

    如何解决ElementPlus的el-table底白线问题

    这篇文章主要介绍了如何解决ElementPlus的el-table底白线问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue2如何安装引入Ant Design

    vue2如何安装引入Ant Design

    这篇文章主要介绍了vue2如何安装引入Ant Design问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue抽出组件并传值实例

    vue抽出组件并传值实例

    这篇文章主要介绍了vue抽出组件并传值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中关于checkbox使用的问题

    vue中关于checkbox使用的问题

    这篇文章主要介绍了vue中关于checkbox使用的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    这篇文章主要介绍了vue.js过滤器+ajax实现事件监听及后台php数据交互,结合实例形式分析了vue.js前台过滤器与ajax后台数据交互相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • vue-cli 目录结构详细讲解总结

    vue-cli 目录结构详细讲解总结

    这篇文章主要介绍了vue-cli 目录结构详细讲解总结,详细的介绍了整个项目的目录以及目录文件的用法,非常具有实用价值,需要的朋友可以参考下
    2019-01-01

最新评论