VUE路由切换时回到顶部

今天使用vue开发的时候遇到这样一个问题，当页面使用动态路由时，都参数变了，页面停在当前位置，很不利于用户的体验

开始尝试过用push的方法跳转路由，同时将滚动条位置设置为0，如下

 this.$router.push({ name: "category", params: { id: val } });
            // document.body.scrollTop = 0;
            // document.documentElement.scrollTop = 0;

后来看了看官方文档vue-router API

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

最终解决方案， 在router上添加一个全局afterEach函数，如下

router.afterEach(() => {
  window.scrollTo(0, 0)
})

问题解决。