Vue Router - 동적 라우트 매칭과 파라미터

Vue Router는 Vue.js 의 공식 라우터

Vue 코어와 긴밀하게 통합되어 싱글 페이지 앱을 쉽게 만들 수 있음

기능

• 중첩된 라우트 매핑
• 동적 라우팅
• 모듈식 컴포넌트 기반의 라우터 설정
• 라우트에 파라미터, 쿼리, 와일드카드 적용
• Vue.js의 트랜지션 시스템을 사용한 트랜지션 효과
• 라우트 탐색을 세밀하게 컨트롤
• 링크에 자동으로 엑티브 CSS 클래스 적용
• HTML5 히스토리 모드 또는 해시 모드
• 커스텀 스크롤 동작
• URL에 대한 적절한 인코딩

 

설치

기존 프로젝트가 있을 시 자신이 사용하는걸로 ㄱ

npm install vue-router@4


yarn add vue-router@4


pnpm add vue-router@4

 

 

동적 라우트 매칭과 파라미터

 

주어진 패턴에 따라 같은 컴포넌트에 라우트를 매핑 해야 될 때

예를 들어 모든 사용자에 대해 다른 사용자 ID 로 렌더링되어야 하는 UserView 컴포넌트가 있다고 설정하고

Vue Router에서는 경로에 동적 세그먼트를 사용할 수 있다. -> 파라미터

 

router.js

import User from './UserView.vue'

// 이것들은 `createRouter`에 전달
const routes = [
  // 동적 세그먼트는 콜론으로 시작
  { path: '/users/:id', component: UserView },
]

이렇게 하면 /users/testMan   /users/souj  가 같은 라우트로 매핑됨

- 파라미터는 콜론 ( : ) 으로 표기하고 모든 컴포넌트에서 route.params로 노출됨

 

 

UserView.js

-> 요청을 /users/testMan 으로 요청 시 객체로 id 값이 testMan으로 들어온다

<script setup>

import {useRoute} from "vue-router";
import {watch} from "vue";

const route = useRoute()

const test = route.params.id

console.log(test) // result : testMan


</script>

<template>

  <div class="users">
    <h1>User : {{ test }}</h1>
  </div>

</template>

<style scoped>

</style>

 

 

파라미터 변경에 반응하기

 

파라미터가 있는 라우트를 사용할 때 주의할 점은 사용자가 /users/testMan  ->  /users/souj 으로 이동할 때

동일한 컴포넌트 인스턴스가 재사용된다는 것 -> 같은 컴포넌트 이기에 인스턴스를 파괴하고 새것을 생성하는 것 보다 효율적이지만 컴포넌트의 생명주기 훅이 호출되지 않는다는 것을 의미함

 

같은 컴포넌트에서 파라미터 변경에 반응하려면 route 객체에서 route.params 를 감시

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

const route = useRoute()

watch(() => route.params.id, (newId, oldId) => {
  // 라우트 변경에 반응합니다...
})
</script>

또는 beforeRouteUpdate 탐색 가드를 사용해서 탐색을 취소 할 수도 있음

 

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
// ...

onBeforeRouteUpdate(async (to, from) => {
  // 라우트 변경에 반응합니다...
  userData.value = await fetchUser(to.params.id)
})
</script>

 

 

모두 예외 처리 / 404 찾을 수 없음 라우트

 

일반 파라미터는 URL 프래그먼트 사이에 있는 문자만 일치시키는데

아무거나 일치시키고 싶다면 , 파라미터 뒤에 괄호 안에 정규식을 추가하여 사용자 지정 파라미터 regexp 를 사용

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

pathMatch 파라미터를 반복 가능하게 

router.push({
  name: 'NotFound',
  // 현재 경로를 유지하고 첫 번째 문자를 제거하여 타겟 URL이 `//`로 시작하지 않도록 합니다
  params: { pathMatch: route.path.substring(1).split('/') },
  // 존재하는 쿼리와 해시를 유지합니다
  query: route.query,
  hash: route.hash,
})