🔷 Nested Routes( 중첩된 라우트 )

실제 앱의 컴포넌트 구조에선 중첩이 많이 된다. 공통된 영역은 고정, 각 View 영역은 URL에 매핑된 컴포넌트를 보여주는(렌더링하는) 작업을 해보자

• 특정 페이지 안에 메뉴영역은 고정시키고, 특정 부분만 렌더링 하고싶다? 그 영역에 컴포넌트를 선언하면 된다.

• nested/NestedView.vue 만들기, 알약 탭 추가

  https://getbootstrap.com/docs/5.0/components/navs-tabs/#pills

  <template>
    <div>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Nested One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Nested Two</a>
        </li>
      </ul>
    </div>
  </template>
  
  <script setup></script>
  
  <style lang="scss" scoped></style>
  
  

• index.js 라우트 등록

    {
      path: '/nested',
      name: 'Nested',
      component: NestedView,
    },
  

• TheHeader.vue에 Nested 버튼 추가

  

  

  워케이!

🔹 경로에 따라 다른 컴포넌트 렌더링

<aside> <img src="notion://custom_emoji/856bb7c3-0327-47da-91c8-dd13a27d6ed0/12fd91c8-ac0e-8082-8323-007a3a581aa9" alt="notion://custom_emoji/856bb7c3-0327-47da-91c8-dd13a27d6ed0/12fd91c8-ac0e-8082-8323-007a3a581aa9" width="40px" />

<RouteView>가 설정되어있고, 경로에 따라서 ‘<NestedView>(해당 컴포넌트)영역’만 바뀐다.

다음은 중첩된 라우트를 사용하여 <NestedView>에서 콘텐츠만 다르게 렌더링 하겠습니다. <NestedView> 페이지 컴포넌트 안에 <RouterView> 설정 🏃

</aside>

• nested/NestedOneView.vue

  <template>
    <div class="card bg-dark text-white">
      <div class="card-header">Nested One</div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">
          With supporting text below as a natural lead-in to additional content.
        </p>
        <a href="#" class="btn btn-outline-danger">Go somewhere</a>
      </div>
    </div>
  </template>
  

• 중요❕index.js

  {
    path: '/nested',
    name: 'Nested',
    component: NestedView,
    children: [
      {
        path: 'one',
        name: 'NestedOne',
        component: NestedOneView,
      },
      {
        path: 'two',
        name: 'NestedTwo',
        component: NestedTwoView,
      },
    ],
  }
  

  <aside> <img src="notion://custom_emoji/856bb7c3-0327-47da-91c8-dd13a27d6ed0/12fd91c8-ac0e-8082-8323-007a3a581aa9" alt="notion://custom_emoji/856bb7c3-0327-47da-91c8-dd13a27d6ed0/12fd91c8-ac0e-8082-8323-007a3a581aa9" width="40px" />

  NestedView컴포넌트 내부 중첩된 라우트를 렌더링하기 위해서, children옵션을 사용해 하위 라우트를 설정합니다.( 배열 형태 )

  이렇게 path를 one, two 상대경로로 작성했지만, 실제 라우팅 경로는 /nested/one입니다.( 아래 참고 to경로 참고하기 )

  ⚠️ /one처럼 /를 넣으면 절대경로를 의미한다. ⚠️

  

  </aside>

• NestedView.vue

    <div>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <RouterLink class="nav-link" active-class="active" to="**/nested/one**">Nested One</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink class="nav-link" active-class="active" to="**/nested/two**">Nested Two</RouterLink>
        </li>
      </ul>
      <hr class="mt-5" />
      <RouterView></RouterView>
    </div>
  

  

  <aside> ☝️

  children옵션을 중첩해서 사용할 수도 있다.

  </aside>