标准答案:

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

如上,简单解释一下,其实scrollBehavior这个api初衷应该是用于定位锚点的。也就是比如你的页面有一些<div id="abc"></div>这种锚点,希望在跳转路由之后自动定位到那个锚点上,那么该方法就可以实现。

后来这个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 官方文档

Logo

前往低代码交流专区

更多推荐