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})
整体如下