vue-router 页面跳转,返回到顶部的几种方式
标准答案:const router = new VueRouter({routes,// 对于页面跳转,全部都返回到页面顶部。scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 };},});如上,简单解释一下,其实scrollBehavior这个api初衷应该是用于定位锚点的。也就是比如你的页面有一些<div id="a
标准答案:
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 官方文档
更多推荐
所有评论(0)