[Vue] 라우터(Router) 방식 (Nested Routers, Named Views)

📕 Language/Vue

[Vue] 라우터(Router) 방식 (Nested Routers, Named Views)

a n u e 2022. 5. 4. 16:47

1. Nested Routers

라우터 컴포넌트 안에 하위 컴포넌트를 중첩하여 구성

특정 URL에 지정된 하나의 컴포넌트가 여러 개의 하위 컴포넌트를 가짐

children 옵션 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <template>
        <div id="app">
            <!-- URL이 /user인 경우, User라는 이름의 component가 들어옴 -->
        <router-view></router-view>
        </div>
    </template>

    <script>
    const User = {
    template: `<div class="user">
	  <h2>User {{ $route.params.id }}</h2>
	  // id값에 맞는 User의 하위 컴포넌트가 들어옴 
      <router-view></router-view>
      </div>`,
    }

    const routes = [
    {
        path: '/user/:id',
        component: User,
        children: [{
            // /user/:id/profile
            path: 'profile',
            component: UserProfile,
        },
        {
            // /user/:id/posts
            path: 'posts',
            component: UserPosts,
        },
    ],
    },
    ]
    </script>
</body>
</html>

2. Named Views

특정 URL에 같은 레벨의 다수의 컴포넌트를 '영역별'로 지정하여 렌더링

components 옵션 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <template>
        <div id="app">
            <router-view name="appHeader"></router-view>
            <router-view></router-view>
            <router-view name="appFooter"></router-view>
          </div>
    </template>

    <script>
    const routes = [{
        path: '/home',
        components: {
            appHeader: AppHeader,
            default: Body,
            appFooter: AppFooter
        }
    }]
    </script>
</body>
</html>

현재 실무에서는 기본 라우터 형식이나, 1번 형식이 종종 보이는 듯 하다.

참고

router-link에 path말고, name값을 적어줄 수도 있다.

그럼 name이랑 매핑되겠지 .. ?

<router-link :to="{ name: 'user', params: { username: 'kimeuna' }}">User</router-link>

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]