VueRouter의 Dynamic Route Matching with params 파헤치기

:param Data Binding

Router를 통한 화면이동 중 동적으로 데이터를 넘겨주는 방법을 알아보겠습니다.
이것은 마치 GET방식의 데이터 전송과 유사한데요. ?key=value&key=valeu&...형식으로 사용하는 것이 아닌 콜론(:)을 사용하는 방법입니다.
이 방식은 route의 path에 key를 작성하고 패턴을 적용시키는 방법입니다.

query String을 사용하는 방법은 밑에서 알려드리도록 하겠습니다.

다음 예시 코드는 User.vue파일로 라우팅시 id라는 key값으로 데이터를 전달하는 방법입니다. 예시를 보겠습니다.

import User from './User.vue'

const routes = [
    { path: '/users/:id', component: User},
]

<template>
    <div>
        <!-- 현재 라우트는 Options API방식에서는 $route로 접근이 가능합니다.-->
        User {{ $route.params.id }}
    </div>
</template>

패턴에 따른 데이터 처리 방법은 아래와 같습니다. 참고해 보세요.

pattern	matched path	$route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

이 routes의 path를 설정하는 부분에는 정규식을 적용할 수도 있습니다.
path에 :를 사용하여 parameter를 받을 시 ()를 사용하는 방식입니다.

import Main from "@/Main.vue"
import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    { path: '/:id/:pwd(\\d+)', name: 'Main', component: Main },
    { path: '/Note', name: 'Note', component: () => import('@/components/Note.vue') }
]

const router = createRouter({
    history: createWebHashHistory('/'),
    routes,
})

export default router

QueryString Data Binding

parameter가 ?로 들어올 때에 사용하는 방식입니다.
통상 우리가 알고 있는 GET방식의 데이터를 처리하는 방법이죠.
:를 사용하여 데이터를 바인딩하는 방법보다 심플 할 수 있습니다.

다음과 같이 URL에 QueryString으로 데이터를 전송했다고 가정해봅시다.

http://localhost:3000?text=hello&size=30

import Main from "@/Main.vue"
import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    { path: '/', name: 'Main', component: Main },
    { path: '/Note', name: 'Note', component: () => import('@/components/Note.vue') }
]

const router = createRouter({
    history: createWebHashHistory('/'),
    routes,
})

export default router

<template>
    {{ $route.query.text }} <!-- hollo -->
    {{ $route.query.size }} <!-- 20 -->
</template>

Parameter 변경에 반응하게 하기

parameter가 있는 route를 사용할 때 주의할 점은 /users/kim과 /users/park은 동일한 Router Instanace가 재사용된다는 것입니다.
우리는 이를 이용하여 parameter가 변경되는 것을 감지해 특별한 동작을 지시 할 수 있죠.

<script setup>
improt { watch } from 'vue'
improt { useRoute } from 'vue-router'

const route = useRoute()

watch(() => route.params.id, (newId, oldId) => {
    //route 변경에 따른 처리 로직
    ...
})
</script>

위의 방법외에 beforeRouteUpdate 탐색가드를 사용하면 탐색을 취소할수도 있습니다.

<script setup>
improt { onBeforeBouteUpdate } from 'vue-router'

const userData = ref('')

onBeforeBouteUpdate(async (to, from) => {
    //route 변경에 따른 처리 로직
    userData.value = await fetchUser(to.params.id)
})
</script>

모두 예외 처리(ex. 404페이지 라우팅)

일반 parameter는 URL 프래그먼트 사이에 있는 문자만 일치시킬 것입니다.
하지만 정규식을 추가하여 아무거나 일치시키도록 만들 수도 특정패턴을 갖도록 사용할 수도 있습니다.

const routes = [
    // 모든것을 일치시키고 'route.params.pathMatch' 아래에 넣을 것
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
    // 'user-'로 시작하는 모든것을 일치시키고 'route.params.afterUser' 아래에 넣을 것
    { path: '/user-:afterUser(.*)', component: UserGeneric },
]

위 코드를 통해 route의 path를 배열로 나누어 직접 탐색할 수 있습니다.

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

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

router.push({
    name: 'NotFound',
    // 현재 경로를 유지하고 첫 번째 문자를 제거하여 타겟이 '//'로 시작하는것을 방지
    params: { pathMatch: route.path.substring(1).split('/') },
    // 기존 query와 hash는 유지
    query: route.query,
    hash: route.hash,
})
</script>