vue-router 页面跳转，返回到顶部的几种方式

标准答案：

const router = new VueRouter({
     
  routes,
  // 对于页面跳转，全部都返回到页面顶部。
  scrollBehavior(to, from, savedPosition) {
     
    return {
      x: 0, y: 0 };
  },
});

如上，简单解释一下，其实scrollBehavior这个api初衷应该是用于定位锚点的。也就是比如你的页面有一些

这种锚点，希望在跳转路由之后自动定位到那个锚点上，那么该方法就可以实现。

后来这个api提供了更为精确的定位，就是上边代码中显示的定位到x y 坐标。

基于此，我们可以思考，若我定位到一个锚点，而这个锚点就是根元素app，那么路由之间的跳转，都会定位到app，也就是页面顶部。是不是也可以呢？答案是肯定的。

const router = new VueRouter({
     
  routes,
  // 对于页面跳转，全部都返回到页面顶部。
  // eslint-disable-next-line no-unused-vars
  scrollBehavior(to, from, savedPosition) {
     
    return {
     
      selector: '#app',
    };
  },
});

其实还可以通过导航守卫，在页面离开之前，先回到顶部，再进行跳转。基于这个思路可以这样实现：

router.beforeEach((to, from, next) => {
     
  // 让页面回到顶部
  document.documentElement.scrollTop = 0;
  next();
});

最后介绍下这个方法scrollBehavior：

该方法一定需要一个返回值，要么是一个锚点，要么一组坐标。但对于某个页面，如果我不想返回顶部怎么办？

其实只要返回false就可以了，或者官方话，返回falsy, falsy的意思是说，当一个表达式在被隐式转换之后得到false的，即为falsy。

比如if (0) console.log('i am falsy')。 0 就认定为一个falsy类型。

当然作为一个函数，不写return，就等同于return undefined， 所以如果我不想返回顶部，什么也不返回就可以，因为undfined就是falsy.

参考
https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy
vue-router 官方文档