[콜럼Vue스] 명명 라우트

명명 라우트 (Named Routes)

명명 라우트는 Vue Router에서 라우트를 정의할 때 이름을 부여하는 방식으로, 라우트를 보다 쉽게 참조하거나 네비게이션할 수 있게 해줌. 라우트 이름을 사용하면 URL을 직접 입력하거나 하드코딩하는 대신, 라우트의 이름을 통해 경로를 참조할 수 있음.

 

명명 라우트 정의

라우트를 정의할 때 name 속성을 추가하여 라우트에 이름을 부여할 수 있음.

const routes = [
  { 
    path: '/user/:id', 
    component: UserComponent,
    name: 'user' // 라우트 이름 정의
  }
]

명명 라우트로 네비게이션

라우트 이름을 이용해 네비게이션하려면 router.push 또는 <router-link>에서 이름을 참조할 수 있음.

// router.push를 사용한 네비게이션
this.$router.push({ name: 'user', params: { id: 123 } })

// <router-link>에서의 사용
<router-link :to="{ name: 'user', params: { id: 123 }}">사용자 페이지</router-link>

이 방식은 URL을 직접 작성하는 것보다 코드 유지보수와 가독성을 높여줌. 특히, URL이 변경되더라도 라우트 이름만 유지하면 네비게이션 코드의 수정을 최소화할 수 있음.

---

명명 뷰 (Named Views)

명명 뷰는 Vue Router에서 한 라우트에 여러 뷰 컴포넌트를 동시에 렌더링할 수 있는 기능임. 이는 여러 <router-view>를 다르게 이름을 지정하여, 동시에 여러 컴포넌트를 각각의 위치에 렌더링하는 데 사용됨.

명명 뷰 정의

하나의 경로에서 여러 뷰를 렌더링하려면, 라우트에서 components 속성을 사용하고, 여러 컴포넌트를 뷰 이름에 매핑함.

const routes = [
  {
    path: '/dashboard',
    components: {
      default: DashboardComponent,    // 기본 뷰
      sidebar: SidebarComponent,      // 이름이 있는 뷰
      footer: FooterComponent         // 다른 이름의 뷰
    }
  }
]

 

• default는 기본 <router-view>에 렌더링되는 컴포넌트임.
• sidebar와 footer는 각각 이름이 있는 <router-view>에 렌더링됨.

템플릿에서 명명 뷰 사용

<router-view>에 name 속성을 부여하여, 각 이름에 맞는 컴포넌트를 렌더링할 위치를 지정할 수 있음.

<template>
  <div>
    <router-view></router-view>        <!-- 기본 뷰 -->
    <router-view name="sidebar"></router-view>   <!-- 사이드바 뷰 -->
    <router-view name="footer"></router-view>    <!-- 푸터 뷰 -->
  </div>
</template>

 

예시

const routes = [
  {
    path: '/profile',
    components: {
      default: ProfileComponent,   // 기본 프로필 뷰
      sidebar: ProfileSidebarComponent,  // 사이드바 컴포넌트
      footer: ProfileFooterComponent     // 푸터 컴포넌트
    }
  }
]

이렇게 하면 /profile 경로에서 <router-view>에 ProfileComponent가 기본으로 렌더링되고, 이름이 있는 <router-view>에는 각각 ProfileSidebarComponent와 ProfileFooterComponent가 렌더링됨.

---

 

• 명명 라우트는 라우트에 이름을 부여하여 네비게이션을 간편하게 만드는 기능으로, 특히 URL의 변화에 유연하게 대응할 수 있음.
• 명명 뷰는 여러 개의 뷰 컴포넌트를 동시에 렌더링할 수 있는 방식으로, 레이아웃이나 복잡한 화면 구성에서 유용함.