Vue.js 切换路由后页面回到顶部

[广告:最高 ¥2000 红包]阿里云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

vue-router有两种路由模式(HTML5 History 模式 | Vue Router)。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

默认情况下,vuejs单页面应用在切换路由这后,滚动条的位置是不变的。

因为URL的变化并未引起页面的重载,同一个页面,没有特定的事件触发,浏览器没办法也没有理由更改滚动条所处的位置。

所以当在路由切换之后,如果希望回到页面的顶部,需要做类似于 window.scrollTo(0,0) 操作。

正因为vue有两种路由模式,所以也有两类回到顶部的处理方式。

1 history 模式

滚动行为 | Vue Router

vue-router 在 history 模式下,提供了一个 scrollBehavior 方法,用以控制滚动行为,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

如下为浏览器页面加载的默认操作,如果没有传入滚动条位置信息(savedPosition),就回到页面的顶部,即返回位置信息 {x:0,y:0}

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

2 hash 模式

导航守卫 | Vue Router

在 hash 模式下,需要使用官方的导航守卫中的router.beforeEach:

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)  
  next()
});

演示地址:http://www.jmwjl.com

码中人 微信公众号