VueRouter의 Composition API 파헤치기

Composition API

Vue가 Version2에서 Version3가 되면서 가장 큰 변화는 setup하는 과정이라고 할 수 있습니다.
기존의 방식을 Options라고하며, 현재 등장한 방법을 Composition이라고 합니다.
하지만, 아직 우리는 Options API를 사용할 수 있습니다.

<script setup>에서 Route와 Router 접근

setup내부에는 this를 사용할 수 없습니다. 따라서, Comsition API를 사용한다면, <script setup>으로 인해 this.$router or this.$route로 접근할 수 없습니다.
이를 사용하려면 useRouter() or useRoute()를 호출하여 사용할 수 있습니다.

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function pushWithQuery(query) {
    router.push({
        name: 'search',
        query: {
            ...route.query,
            ...query,
        },
    })
}
</script>

 

route 객체는 동적인(반응형) 객체입니다. 때문에 대부분의 경우 route 객체를 감시하는 것을 지양해야 합니다. 대신에 변경이 예상되는 하위 속성을 감시할 수 있습니다.

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const userData = ref()

watch(
    () => route.params.id,
    async newId => {
        userData.value = await fetchUser(user)
    }
)
</script>

Navigation Guard

이전에 우리는 beforeRouteLeave와 beforeRouteUpdate에 대해 학습했습니다.
Composition API에서는 Vue Router update와 leave를 다음과 같이 사용합니다.

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

// onBeforeRouteLeave에서도 `this`에 접근할 수 없습니다.
onBeforeRouteLeave((to, from) => {
    const answer = window.confirm(
        '정말 화면을 이동하겠습니까? 변경사항은 저장되지 않습니다!'
    )
    // 취소 버튼 클릭시 같은 페이지에 머뭅니다.
    if (!answer) return flase
})

const userData = ref()

// onBeforeRouteUpdate에서도 `this`에 접근할 수 없습니다.
onBeforeRouteUpdate(async (to, from) => {
    // 이동하려는 페이지의 `id`값이 기존과 같다면 동작하지 않겠죠??
    if(to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
    }
})
</script>

 

Composition API의 Guard는 <router-view>에 의해 렌더링된 모든 컴포넌트에서 사용할 수 있습니다.
컴포넌트 내 가드처럼 라우트 컴포넌트에서 직접 사용할 필요가 없는 것이죠.