Vue Router : URL 파라미터 활용하기

Vue Router 라이브러리 사용 시 URL 파라미터를 활용하는 방법을 알아봅니다.

(컴포지션 API에 기반하여 설명합니다.)

Vue3

URL에서 쿼리 파라미터 읽기

예를 들어 페이지네이션을 작성할 때
다음과 같은 URL이 있을 수 있습니다.
http://example.com/events?page=4

 

컴포넌트에서 page 쿼리 파라미터에 어떻게 접근할까요?

<script setup>
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
<h1>You are on page {{ route.query.page }}</h1>

</template>

URL에서 Path Variables(Page) 읽기

라우터에서 아래와 같이 Path Variable(:page)설정해줌

const routes = [
  ...
  { path: '/events/:page', component: Events },
]

탬플릿에서 다음과 같이 엑세스

<h1>You are on page {{ route.params.page }}</h1>

URL 파라미터를 컴포넌트의 Props로 (Not good)

디커플링 방법이라고 하는데, 컴포저블이 있으니 이제 그냥 컴포저블 쓰자...

물론 파라미터 의존성 주입이 좀 더 객체지향적인 방법이긴 하지만,

함수형은 껍데기를 구체화하는 대신 속살을 더욱 추상화하는 것을 선호

 

라우터 설정에서 다음과 같이 props : true 적용

const routes = [
  ...
  { path: '/events/:page', component: Events, props: true },
]

vue-router 의존성 제거하고 다음과 같이 사용

<script setup>
import { defineProps } from "vue";
const props = defineProps({ page: String });
</script>

<template>
  <h1>You are on page {{ props.page }}</h1>
</template>

라우터 레벨 컨피규레이션 (Not good)

해당 경로로 접근하면, 컴포넌트에 공통 props를 주입해줌

개인적으로 이것도 컴포저블로 빼는 것을 선호함

 

라우터 설정에서 다음과 같이 props를 설정

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    props: { showExtra: true },
  },

쿼리 파라미터 변환 (Not good)

경우에 따라 쿼리 매개 변수로 전송되는 데이터가 컴포넌트에 도달하기 전에 변환되어야 하는 상황이 있을 수 있습니다.
예를 들어 매개변수를 다른 타입으로 캐스트하거나 이름을 바꾸거나 값을 결합할 수 있습니다.

 

쿼리 파라미터를 라우터 설정에서 변환해서 컴포넌트의 프롭으로 주입해줌

이것도 그냥 컴포저블로 만들면 훨씬 간단할듯

 

중첩된 설정으로 생각하는 것보다

연속적인 함수의 체이닝으로 생각하는 것이 더 이해하기 편함

그리고 설정 방법은 사용하는 라이브러리를 바꿀 때마다 매번 다름

컴포저블은 vue를 사용한다면 모든 프로젝트에서 일관된 사용법

 

라우터에서 다음과 같이 설정

(route를 인자로 받는 익명 함수를 선언하여, 해당 함수 인자에서 값을 꺼내 prop을 만든다.)

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    props: (route) => ({ showExtra: route.query.myProps }),
  },

 

 

 

 

참고 : 

https://www.vuemastery.com/courses/touring-vue-router/receiving-url-parameters

Receiving URL Parameters - Touring Vue Router | Vue Mastery

https://router.vuejs.org/guide/advanced/composition-api.html

Vue Router and the Composition API | Vue Router