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