SOURCE

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}

// scrollBehavior:
// - 这个功能只在 HTML5 history 模式下可用
// - 缺省是没有滚动功能的
// - 返回false就会阻止滚动
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // 只有使用浏览器的前进后退才会有savedPosition
    return savedPosition
  } else {
    const position = {}
    // 导航成功后,如果当前的路由配置是hash，就通过返回selector来滚动到对应的锚点
    if (to.hash) {
      position.selector = to.hash
    }
    // 检查导航匹配成功的路由信息，是否配置了元信息有scrollToTop属性
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // 如果没有返回selector或者使用selector查找元素失败，就使用坐标定位
      position.x = 0
      position.y = 0
    }
    // 如果返回的position对象是false或者是空对象，就保持当前的滚动位置不变
    return position
  }
}
const router = new VueRouter({
  mode: 'history',
 scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router
}).$mount('#app')  

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.js"></script>


<div id="app">
  <h1>滚动行为</h1>
  <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/foo">/foo</router-link></li>
    <li><router-link to="/bar">/bar</router-link></li>
    <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
  </ul>
  <router-view class="view"></router-view>
</div>