解决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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VUE中document.body.scrollTop为0的问题

    Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0. 查资料发现是DTD的问题. 页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement. 页面没有DTD,即没指定DOCTYPE时,使用document.body. IE和Firefox都是如此. 以上这篇解决VUE中docum

  • vue项目设置scrollTop不起作用(总结)

    今天在开发中,遇到这样一个情景.一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置. 我想的方案是获取到每个模块距离文档顶部的距离,然后将值赋给对应要滚动的元素. 步骤如下: 首先给每个模块一个id,例如: <div class="module module1" id="anchor-0"> <div class="module module1" id="a

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

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • vue路由跳转后刷新指定页面的方法

    做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • Vue单页式应用(Hash模式下)实现微信分享的实例

    本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht

  • vue单页应用的内存泄露定位和修复问题小结

    在前端项目(PC端)中,内存泄露的定位往往比修复更加困难,即使google浏览器有提供Memory工具,但是面对成千上万的元素和错综复杂的引用关系,开发则依然很难快速定位到问题代码块. 一.什么是内存泄漏? 系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak).当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃.Chrome限制了浏览器所能使用的内存极限(64位为1.4GB,32位为1.0GB),这也就意味着浏览器将无法直接操作一些大内存对象. V8引擎在执行垃圾回

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • vue 单页应用和多页应用的优劣

    多页应用 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 为什么多页应用的首屏时间快? 首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快. 为什么搜索引擎优化效果好(SEO)? 搜索引擎在做网页排名的时候,要根据网页内容才能给网页权重,来进行网页的排名.搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在H

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • vue单页应用在页面刷新时保留状态数据的方法

    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

随机推荐