라우터의 종류

Nested Router

nested router는 VueRouter에서 제공하는 기능 중 하나로 중첩된 라우팅을 구현한는 방법입니다.

이를 통해 계층 구조를 가진 페이지를 표현하고 관리할 수 있다.

 

nested router는 라우터를 부모-자식 관계로 구성한다.

부모 라우터는 부모 페이지로 동작하고 자식 라우터는 부모 페이지 내에서 표시되는 하위 페이지로 동작한다. 네스티드 라우터를 사용하면 각 페이지에 해당하는 컴포넌트를 중첩하여 사용할 수 있따.

 

• main.vue

<template>
  <div id="app">
    <h1>네스티드 라우터 설정</h1>
    <!-- index.vuew 출력 -->
    <router-view></router-view>  
  </div>
</template>

• index.vue

<template>
  <div id="app-sub">
    <h1>sub 설정</h1>
    <!-- sub.vue 출력 -->
    <router-view></router-view>  
  </div>
</template>

• router.js

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      <!-- 웹브라우저에서 홈페이지 주소 뒤에 /url을 붙이면 main.vue의 <router-view> 영역에 index.vue의 내용이 출력됨 -->
      path: "/url",
      name: "Home",
      component: () => import("index.vue"),
      <!-- 웹브라우저에서 홈페이지 주소 뒤에 /url/suburl1을 붙이면 index.vue의 <router-view> 영역에 sub.vue의 내용이 출력됨 -->
      children: [
        {
          path: "/suburl1",
          name: "sub",
          component: () => import("sub.vue"),
        },
      ],
    },
  ],
});

 

네임드 뷰 라우터

네임드 뷰(named view) 라우터는 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 다음 코드를 보면 <router-view>의 name 속성으로 컴포넌트를 연결하는 방식이 있따. 많은 컴포넌트를 한번에 처리할 때 사용한다.

• index.vue

<template>
  <div id="app">
    <h1>네임드 뷰 라우터 설정</h1>
    <router-view name="header"></router-view>
    <router-view name="content"></router-view>
  </div>
</template>

 

router.js

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/url",
      name: "Home",
      component: {
        header: () => import("/layout/header.vue"),
        content: () => import("/layout/header.vue"),
      },
    },
  ],
});