在登录页面输入用户名和密码之后跳转到主页面,浏览器可视区域上部显示的不是主页面的header部分,后来发现无论从哪一页面跳转到主页面,显示的都不是页面的header。
此时解决问题的思路就很明了了
就问题而言,在路由跳转时或者后,把页面定位设置成 x: 0, y: 0
第一种想法:
在路由的全局导航守卫router.beforeEach添加
window.scrollTo(0,0)
但是没好用,我得在路由元中meta添加一个title属性,然后用 document.title=to.meta.title修改当前页面的title,麻烦,直接弃掉
第二种想法(官网提供方法):
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
简单的用法并没有实现,得用异步处理:将其挂载到从页面级别的过渡组件的事件上,令其滚动行为和页面过渡一起良好运行
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 5)
})
}
ok了,问题解决!!
总结:
在第一种想法中,虽然最终我没有应用,但是最终我实践过,方法可行。代码写的时间久了,一些问题根据表现的形式就可以判断出问题的所在,这又是自身进步的表现吧。