[콜럼Vue스] 동적라우트

동적 라우트는 URL 경로에 변수를 포함하여 여러 가지 유사한 경로를 처리할 수 있는 기능을 말함. Vue Router에서 동적 라우트는 특정 URL 패턴에 매칭되는 경로를 정의하고, 해당 경로에서 동적으로 변하는 부분을 파라미터로 받을 수 있음.

동적 라우트 설정 방법

동적 라우트는 경로에 콜론(:)을 붙여 정의함.

예를 들어, :id라는 동적 파라미터를 사용하면 /user/1, /user/2와 같은 경로가 모두 동일한 라우트에 매칭될 수 있음.

const routes = [
  {
    path: '/user/:id',
    component: UserComponent
  }
]

위 코드에서 path에 있는 :id 부분이 동적 파라미터로, /user/1, /user/2 등의 URL에 매칭됨. 여기서 :id는 동적으로 변하는 값임.

파라미터 접근하기

watch를 이용해 동적 파라미터 변경 감지

동적 라우트는 URL의 파라미터가 변경될 때마다 컴포넌트를 재사용할 수 있음. 이 경우, watch를 이용해 파라미터 변경을 감지하고 필요한 작업을 처리할 수 있음.

export default {
  name: 'UserComponent',
  mounted() {
    console.log(this.$route.params.id)  // URL의 id 값을 출력
  }
}

예를 들어, /user/3 경로로 들어가면 this.$route.params.id는 3이 됨.

watch를 이용해 동적 파라미터 변경 감지

동적 라우트는 URL의 파라미터가 변경될 때마다 컴포넌트를 재사용할 수 있음. 이 경우, watch를 이용해 파라미터 변경을 감지하고 필요한 작업을 처리할 수 있음.

export default {
  watch: {
    '$route.params.id'(newId) {
      console.log('id가 변경되었습니다:', newId)
      // 새로운 id로 필요한 작업을 실행
    }
  }
}

여러 파라미터를 사용하는 동적 라우트

동적 라우트에서는 여러 파라미터를 사용할 수도 있음. 파라미터는 슬래시(/)로 구분됨.

const routes = [
  {
    path: '/user/:id/post/:postId',
    component: UserPostComponent
  }
]

여기서 :id와 :postId는 각각 params.id와 params.postId로 접근 가능함.

export default {
  mounted() {
    console.log(this.$route.params.id)      // user의 id
    console.log(this.$route.params.postId)  // post의 id
  }
}

 

파라미터 유효성 검사 (정규식 사용)

때로는 특정 패턴에 맞는 파라미터만 허용하고 싶을 때가 있음. 이때 정규식을 이용해 파라미터의 패턴을 정의할 수 있음.

const routes = [
  {
    path: '/user/:id(\\d+)',  // 숫자만 id로 허용
    component: UserComponent
  }
]​

 

동적 라우트의 장점

• 코드 재사용성: 동일한 컴포넌트를 여러 다른 URL에서 재사용할 수 있음.
• 유연성: 여러 변수를 받아 처리할 수 있어 다양한 URL 패턴을 간단하게 처리 가능함.
• 경량화: 라우트 설정이 간단해지며, 다수의 유사한 라우트를 일일이 작성할 필요가 없음.

 

나의 말: