[Vue3] Nested Routes & push 함수

Vue3에서 Nested Routes를 활용하는 방법과 라우터 관련 함수($router.push, $router.go 등)를 알아봅니다.

---

1️⃣ Nested Routes (중첩 라우트)

개념

• Nested Routes는 하나의 페이지 내에서 추가적인 라우트를 분리하여 보여줄 때 사용합니다.
• 예를 들어, /detail/0/author로 접속하면 Detail 페이지 내에 작가 소개(Author) 컴포넌트가, /detail/0/comment로 접속하면 댓글(Comment) 컴포넌트가 표시됩니다.
• URL 경로가 다르므로 브라우저의 뒤로가기/앞으로가기 기능을 자연스럽게 사용할 수 있다는 장점이 있습니다.

구현 방법

1) router.js 설정

const routes = [
  {
    path: '/detail/:id',
    component: Detail,
    children: [
      { path: 'author', component: Author },
      { path: 'comment', component: Comment },
    ]
  }
]

• 설명:
  • /detail/:id 경로에 해당하는 Detail 컴포넌트를 기본으로 로드하고, 그 안에 children 배열을 통해 하위 경로(자식 라우트)를 설정합니다.
  • /detail/:id/author와 /detail/:id/comment 경로로 접근하면 각각 Author와 Comment 컴포넌트가 표시됩니다.
  • Author와 Comment 컴포넌트는 미리 작성하고 import 해둬야 합니다.

2) Detail 컴포넌트에 <router-view>

• Detail.vue 파일 내에 <router-view></router-view> 태그를 추가합니다.
  • 이렇게 하면 Detail 컴포넌트 내부에서 자식 컴포넌트들이 라우트에 따라 렌더링됩니다.
  • 예를 들어, /detail/:id/author 접속 시 <router-view> 자리에 Author 컴포넌트가 보입니다.

참고: 간단한 UI라면 탭 기능 방식으로 구현하는 것도 좋습니다.

---

2️⃣ 라우터 관련 함수

2-1. $router.push

• 기능: 프로그램적으로 페이지 이동을 할 수 있습니다.
• 예시:

  $router.push('/detail/0');
  

  • 위 코드를 실행하면 /detail/0 경로로 이동하게 됩니다.
• 장점: <router-link> 대신 사용 가능하며, 변수나 동적 경로를 쉽게 적용할 수 있습니다.

2-2. $router.go

• 기능: 브라우저의 방문 기록을 활용하여 뒤로가기 또는 앞으로가기 기능을 구현할 수 있습니다.
• 예시:

  $router.go(-1); // 한 단계 뒤로가기
  $router.go(1);  // 한 단계 앞으로가기
  $router.go(-2); // 두 단계 뒤로가기
  

• 설명: 숫자 인자를 이용해 방문 기록을 조작할 수 있습니다.

---

3️⃣ 라우터 개발 팁

• 라우터 에러 확인: 라우터 관련 문법 에러는 터미널에 출력되지 않고, 크롬 개발자 도구 콘솔에 warning 형태로 나타납니다. (warning이므로 사이트 동작은 멈추지 않으니, 콘솔창에서 오류를 확인 후 수정하세요.)
  
• 공식 문서 참고: 더 자세한 내용은 Vue Router 4 공식 사이트를 참고하세요. 필요한 부분은 필요할 때마다 찾아보는 것이 좋습니다.
  

---

📌 정리

• Nested Routes
  • URL을 통한 세분화된 컴포넌트 렌더링으로, 뒤로가기/앞으로가기 기능 등 브라우저 내비게이션을 자연스럽게 지원합니다.
• 라우터 함수 ($router.push, $router.go 등)
  • 코드 내에서 동적으로 페이지를 이동하거나 방문 기록을 제어할 수 있어, 다양한 사용자 경험을 구현할 수 있습니다.
• 개발 팁
  • 콘솔창의 warning 메시지를 주의 깊게 살펴보고, 필요할 때마다 공식 문서를 참고하여 최신 정보를 확인하세요.