Advanced
Scroll Behavior
With client-side routing, we might want to scroll to the top on a new route, or keep the scroll position like a real page reload.
ts
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
return { top : 0 }
// always scroll 10px above the element #main
return { el: '#main', top: 10 }
// Returning the savedPosition
return (savePosition ? savedPosition : { top : 0 })
// "scroll to anchor" behavior & "scroll behavior to smooth"
if (to.hash)
return { el: to.hash, behavior: 'smooth' }
// Delaying the scroll
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ left: 0, top: 0 })
}, 500)
})
}
})
Navigation Guards & Navigation Flow
They are primarily used to guard navigations either by redirecting it or canceling it.
- Navigation triggered.
- Call
beforeRouteLeave
guards in deactivated components. - Call global
beforeEach
guards. - Call
beforeRouteUpdate
guards in reused components. - Call
beforeEnter
in route configs. - Resolve async route components.
- Call
beforeRouteEnter
in activated components. - Call global
beforeResolve
guards. - Navigation is confirmed.
- Call global
afterEach
hooks. - DOM updates triggered.
- Call callbacks passed to
next
inbeforeRouteEnter
guards with instantiated instances.
Every guard function receives two arguments:
to
: the target route location in a normalized format being navigated to.
from
: the current route location in a normalized format being navigated away from.
RouterView slot
The RouterView component exposes a slot that can be used to render the route component
vue
<template>
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" :some-prop="prop"/>
</keep-alive>
</transition>
</router-view>
</template>
Transitions
vue
<template>
<RouterView v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</RouterView>
</template>
Per-Route Transition
ts
// Apply different transitions on each route's.
const routes = [
{
path: '/custom-transition',
component: PanelLeft,
meta: { transition: 'slide-left' },
},
{
path: '/other-transition',
component: PanelRight,
meta: { transition: 'slide-right' },
},
]
vue
<template>
<RouterView v-slot="{ Component, route }">
<!-- Use a custom transition or fallback to `fade` -->
<transition :name="route.meta.transition || 'fade'">
<component :is="Component" />
</transition>
</RouterView>
</template>
Route Meta fields
Attach arbitrary information to routes like: transition names, or roles to control who can access the route, etc.
js
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// only authenticated users can create posts
meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail,
// anybody can read a post
meta: { requiresAuth: false },
},
],
},
]