scrollBehavior 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

scrollBehavior   切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

注意: 这个功能只在 HTML5 history 模式下可用。
const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
  // return 期望滚动到哪个的位置
 }
})

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

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}
对于所有路由导航,简单地让页面滚动到顶部。

 

返回 savedPosition,在按下 后退/前进 按钮时,在滚动条位置,就会像浏览器的原生表现那样:
scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
  return savedPosition
 } else {
  return { x: 0, y: 0 }
 }
}

 

模拟『滚动到锚点』的行为
scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
  return {
   selector: to.hash
  }
 }
}

还可以利用路由元信息更细颗粒度地控制滚动。

routes: [
 { path: "/", component: Home, meta: { scrollToTop: true }},
 { path: "/foo", component: Foo },
 { path: "/bar", component: Bar, meta: { scrollToTop: true }}
]
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
  return savedPosition
 } else {
  const position = {}
  if (to.hash) {
   position.selector = to.hash
  }
   if (to.matched.some(m => m.meta.scrollToTop)) {
   position.x = 0
   position.y = 0
  }
  return position
 }
}

还可以在main.js入口文件配合vue-router写这个

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