vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

针对“vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法”的完整攻略，我们可以采用以下步骤进行实现：

1. 使用Scroll Behavior

vue-router提供了一个非常好用的配置项scrollBehavior，它可以在页面切换时实现滚动条自动滚动到页面顶部。只需要在创建VueRouter实例时，添加如下代码即可：

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

其中scrollBehavior函数接收三个参数：

• to ：即将进入的路由对象。
• from ：即将离开的路由对象。
• savedPosition ：从浏览器进入当前页面时，返回之前的滚动位置。

scrollBehavior的返回值为一个包含x和y属性的对象，表示滚动条的位置。在示例中，我们将它们都设置为0，即回到页面顶部。

2. 通过window.scrollTo方法实现

另外一种方法是通过window.scrollTo方法实现。在vue-router提供的导航钩子中，我们可以使用window.scrollTo方法，将页面滚动条回到顶部。具体实现过程如下：

const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  next()
})

在该方式中，我们在router.beforeEach钩子函数中，调用window.scrollTo方法，并将x与y的值都设置为0，用来实现回到页面顶部。

以上两种方法都可以实现页面切换时，滚动条的自动滚动到页面顶部。

示例代码：

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  next()
})

export default router

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在示例中，我们创建了两个页面：Home.vue和About.vue。在页面切换时，滚动条都能够自动滚动到页面顶部。