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()
});

标签: VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论