vue3路由跳转时，页面如何滚动到顶部

在Vue中使用路由进行页面切换后，我们可以通过设置scrollBehavior来控制页面的滚动位置。

import Vue from 'vue'
import Router from 'vue-router'
 
// 导入组件
import HomePage from './components/HomePage.vue'
import AboutPage from './components/AboutPage.vue'
 
Vue.use(Router)
 
const router = new Router({
  routes: [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 } // 返回{x: 0, y: 0}表示每次都将页面滚动到顶部
  }
})
 
new Vue({
  el: '#app',
  router,
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意：

1、这里是针对 router-view 的滚动。

2、如果出现滚动失败的现象，记得设置高度height。