三种方法实现Vue路由跳转时自动定位在页面顶部

在做Vue项目的时候发现 当路由跳转时 页面是不会自动跳转到顶部的 而是停留在当前已滚动的距离

实现方法其实很简单 共有三种方法可实现页面自动跳转到顶部
在路由的main.js(router.js)里添加如下代码即可：

方法一：

			// 跳转后自动返回页面顶部
			router.afterEach(() => {
			    window.scrollTo(0,0);
			})

方法二：

		const router = new VueRouter({
			  routes:[...],
			  scrollBehavior () {
			    // return返回期望滚动到的位置的坐标
			    return { x: 0, y: 0 }
			  }
		})

方法三：

		router.beforeEach((to, from, next) => {    
		    // chrome兼容
		    document.body.scrollTop = 0
		    // firefox兼容
		    document.documentElement.scrollTop = 0
		    // safari兼容
		    window.pageYOffset = 0
		    next()
		})

使用示例：

		import Vue from 'vue'
		import VueRouter from 'vue-router'
		
		Vue.use(VueRouter)
		
		const routes = [
		  {...}
		]
		
		const router = new VueRouter({
		  routes
		})
		
		export default router
		
		// 跳转后返回页面顶部
		router.afterEach(() => {
		    window.scrollTo(0,0);
		})

此外 还可在页面单独使用：

		<script>
		export default {
		mounted(){
		    // 跳转后返回页面顶部
		    window.scrollTo(0,0);
		}
		</script>