1. 程式人生 > >Vue.js動態路由間切換回到頂部

Vue.js動態路由間切換回到頂部

方案1

使用官方的滾動行為,但是必須開啟HTML5 history 模式,開啟HTML5 history 模式需要後端進行一些配置;

對於所有路由導航,簡單地讓頁面滾動到頂部:

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

像瀏覽器的原生表現那樣:

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

方案2

沒有使用HTML5 history 模式,需要使用官方的導航守衛中的router.beforeEach

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

原文連結:https://wangdaodao.com/20180103/vue-router-scrolltop.html