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、这里是针对 router-view 的滚动。

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