[Vue] 뷰 라우터 (Router, Nested Router, Named View) 본문

Web/Vue

[Vue] 뷰 라우터 (Router, Nested Router, Named View)

미니모아 2022. 7. 12. 18:09
반응형

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

뷰 라우터

기본 라우터

라우팅이란 웹 페이지 간의 이동 방법을 말하는 것으로 SPA에서 주로 사용하고 있다.

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

  • <router-link to ="URL"> : 페이지 이동 태그

  • <router-view> : 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

<!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>Vue router</title>
</head>
<body>
  <div id="app">
    <h1>뷰 라우터 예제</h1>
    <p>
      <router-link to="/main">Main 컴포넌트로 이동</router-link>
      <router-link to="/login">Login 컴포넌트로 이동</router-link>
    </p>
    <router-view></router-view>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    const Main = { template: '<div>Main</div>' };
    const Login = { template: '<div>Login</div>' };

    const routes = [
      { path: '/main', component: Main },
      { path: '/login', component: Login },
    ];

    const router = new VueRouter({
      mode: 'history', // 해시(#) 없애기 위해서
      routes
    });

    var app = new Vue({
      router
    }).$mount('#app');

  </script>
</body>
</html>

url에 따라 페이지 깜빡임 없이 해당 컴포넌트로 이동하여 표시한다. 실제 웹 앱에서는 화면이 여러 개의 컴포넌트로 분할된 경우가 많기 때문에 여러 개의 컴포넌트들을 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰가 필요하다.

네스티드 라우터 (Nested Router)

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 아래와 같이 구성해본다면

User component
ㄴ Post component
ㄴ Profile component

URL에 따라 하위 컴포넌트가 다르게 표시되게 된다.

<!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>Vue nested router</title>
</head>
<body>
  <div id="app">
    <h1>Vue Nested Router</h1>
    <router-link to="/user">Go to User</router-link>
    <router-view></router-view>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    const User = {
      template : `
        <div>
            User Component<br/>
            <router-link to="/user/posts">Go to Post</router-link>
            <router-link to="/user/profile">Go to Profile</router-link>
            <router-view></router-view>
        </div>
      `
    };

    const UserProfile = { template: '<div>User Profile</div>' };
    const UserPost = { template: '<div>User Post</div>' };

    const routes = [
      { 
        path: '/user',
        component: User,
        children: [
          {
            path : 'posts',
            component: UserPost,
          },
          {
            path: 'profile',
            component: UserProfile,
          },
        ]
      },
    ];

    const router = new VueRouter({
      routes
    });

    var app = new Vue({
      router
    }).$mount('#app');

  </script>
</body>
</html>

공식문서 (API Reference | Vue Router)를 참조하면 더 자세한 내용을 볼 수 있다.

네스티드 라우터의 경우 컴포넌트 수가 많아지면 한 번에 표시하는 데 한계가 있다. 이를 해결하기 위해서 네임드 뷰를 사용한다.

네임드뷰

네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 네스티드 라우터와 달리 네임드뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.

<!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>Vue Routing router</title>
</head>
<body>
  <div id="app">
    <h1>Vue Named View</h1>
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script>
    const Body = {template: '<div> body </div>'};
    const Header = {template: '<div> header </div>'};
    const Footer = {template: '<div> footer </div>'};

    const routes = [
      { 
        path: '/',
        components: {
          default: Body,
          header: Header,
          footer: Footer,
        }
      },
    ];

    const router = new VueRouter({
      routes
    });

    var app = new Vue({
      router
    }).$mount('#app');

  </script>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'Web > Vue' 카테고리의 다른 글

[Vue] 뷰 프로젝트 구성하기  (0) 2022.07.13
[Vue] 뷰 템플릿, 디렉티브  (0) 2022.07.13
[Vue] 뷰 컴포넌트 (props, emit, eventBus)  (0) 2022.07.07
[Vue] Vue 인스턴스, 라이프 사이클  (0) 2022.07.07
[Vue] Vue.js란  (0) 2022.07.07
'Web/Vue' Related Articles more
Comments