scrollBehavior
client-side routing을 사용할 때, 새로운 라우터로 향했을 때 우리는 스크롤 위치를 맨 위로 올리고 싶을 때도 있고, 또는 우리는 스크롤 위치를 기억하게하고 싶을 수 도 있습니다.
진짜 페이지 리로드되는 것처럼 말이죠.
vue-router는 너가 원하는 것들을 성취할 수 있도록 해줍니다.
거기에 더 나아가 당신이 원하는대로 스크롤이 동작하도록 커스텀할 수 있게 해줍니다.
라우트 네비게이션에서 말이죠.
지금까지 사용했던 것보다 작은 화면 크기에서 탐색 모음에서 대상을 클릭하면 그런 다음 페이지 맨 아래로 스크롤하십시오.
그런 다음 다른 목적지를 클릭하십시오.
우리가 탐색하는 페이지가 여전히 맨 아래로 스크롤되어 있는 것을 볼 수 있습니다.
그것은 아주 멋지게 될 것입니다. 각 경로 사이의 맨 위로 사용자를 다시 스크롤할 수 있다면.
이렇게 하려면 라우터 옵션에 scrollBehavior 함수를 추가하기만 하면 됩니다.
vue-router 3.x 버전
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
linkExactActiveClass: 'is_active',
linkActiveClass: 'is_active',
scrollBehavior(to, from, savedPosition) {
// return {top: null, left: null, behavior: null}
return savedPosition || { top: 0 }
},
});위와 같이 라우터 코드를 수정하면 라우터 이동시마다 scroll 위치가 맨 위로 올라가는 것을 볼 수 있습니다.
이 영상에서 보여준 페이지는 라우터 전환시 트랜지션 효과가 들어가있다.
fade-in-out 효과로 0.3s에 걸쳐서 트랜지션 효과가 적용되어있다.
때문에
- 현재 페이지에서
top: 0으로 스크롤이 먼저 바로 이동하고 - 스르륵 사라졌다가 다음 라우트에 해당하는 페이지가 다시 스르륵 나타나는
좀 부자연스러운 페이지 이동이 발생한다.
이를 Promise를 통해 해결해보자.
Transition 효과
<template>
<TheNavigation/>
<div class="container">
<router-view v-slot="{Component}">
<transition name="fade" mode="out-in">
<component :is="Component" :key="$route.path"></component>
</transition>
</router-view>
</div>
</template>
<script>
import TheNavigation from './components/TheNavigation.vue'
export default {
components: {
TheNavigation,
}
}
</script>
<style lang="css">
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
linkExactActiveClass: 'is_active',
linkActiveClass: 'is_active',
scrollBehavior(to, from, savedPosition) {
// return {top: null, left: null, behavior: null}
return savedPosition || new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
},
});위와 같이 0.3초 뒤에 top: 0을 적용하면 아주 자연스러운 페이지 전환 효과가 발생한다.
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
linkExactActiveClass: 'is_active',
linkActiveClass: 'is_active',
scrollBehavior(to, from, savedPosition) {
// return {top: null, left: null, behavior: null}
return savedPosition || new Promise((resolve) => {
setTimeout(() => resolve({ top: 0, behavior: 'smooth' }), 300)
})
},
});위와 같이 behavior: 'smooth' 옵션을 추가하면 top: 0으로 스크롤이 이동할 때, 스르륵 움직이는 효과가 발생한다.