vue 路由跳转就是通过对 history.pushState()
和 history.replaceState()
方法的模拟来实现,会往 history
栈中存放一条记录,这也是为什么 vue 的 router.push
方法只能在支持 history.pushState()
方法的浏览器中使用,当调用 router.go()
或者 router.back()
方法的时候就和 history.go()
、history.back()
效果一样,都是对 history
栈中的记录进行访问,上述行为与通过浏览器的回退和前进效果也是一样。
但是,在不加处理的情况下,组件的滚动行为会跟我们想象的不同。
现在随便配置几个路由跳转
这是头部的导航,我在底部也配置了一样的跳转
当我滚动到底部时,点击底部的路由跳转,发现跳转到的页面也是在底部???
如何解决!
我这里使用的是scrollBehavior
去解决的
首先 在 router目录下的index.js文件中配置:
const scrollBehavior = function(to, from, savedPosition) {
// savedPosition 会在你使用浏览器前进或后退按钮时候生效
// 这个跟你使用 router.go() 或 router.back() 效果一致
// 这也是为什么我在 tab 栏结构中放入了一个 点击回退 的按钮
if (savedPosition) {
return savedPosition
} else {
// 如果不是通过上述行为切换组件,就会让页面回到顶部
return { x: 0, y: 0 }
}
}
然后挂载
const router = new VueRouter({
mode: 'history',
scrollBehavior,
base: process.env.BASE_URL,
routes
})
整体如下