Scroll Behavior Configuration
scrollBehavior(to, from, savedPosition), smooth scroll, scroll to hash, restore position.
Controlling Scroll on Navigation
In a single-page app the page does not reload, so the browser does not reset scroll for you. Vue Router's scrollBehavior function lets you decide where the page scrolls after each navigation.
Where It Lives
Pass scrollBehavior when creating the router. It runs on every navigation.
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})All lessons in this course
- Route Meta Fields and Typing
- Route Transitions and Animation
- Scroll Behavior Configuration
- Programmatic Navigation and useRouter