본문 바로가기
웹 개발/Vue.js

[Vue.js] 뷰 라우터

배세 2024. 10. 13. 03:39

뷰 라우터

  • Vue.js의 라우터는 웹 페이지 간의 이동을 관리하는 도구로, SPA(Single Page Application)에서 다양한 화면 간의 네비게이션을 쉽게 처리할 수 있다. 이번 포스팅에서는 Vue 라우터의 여러 예제를 통해 라우팅의 기본 개념과 다양한 구현 방식을 설명한다. 아래에는 3가지 예제, 즉 단일 컴포넌트 라우터, 네스티드(중첩) 라우터, 그리고 네임드 라우터를 다루겠다.

 

1. 단일 컴포넌트를 이용한 라우터 예제

 

첫 번째 예제는 Vue 라우터를 통해 두 개의 컴포넌트(Main, Login)를 이동하는 간단한 예제이다. router-link를 통해 사용자 인터페이스에서 링크를 생성하고, router-view를 통해 해당 경로에 맞는 컴포넌트가 표시된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Component Registration</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>
        var Main = { template: '<div>Main Component</div>' };
        var Login = { template: '<div>Login Component</div>' };

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

        var router = new VueRouter({
            routes
        });

        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

설명:

  • **router-link**는 페이지 간 이동을 처리하는 Vue 라우터의 전용 태그로, to 속성에 이동할 경로를 설정한다.
  • **router-view**는 현재 경로에 맞는 컴포넌트를 렌더링하는 자리표시자 역할을 한다.
  • 라우트 설정에서 /main과 /login 경로에 각각 Main과 Login 컴포넌트를 매핑하여 화면을 전환한다.

 

2. 네스티드(Nested) 라우터 예제

두 번째 예제는 네스티드 라우터로, 상위 컴포넌트(User) 안에 하위 컴포넌트(UserProfile, UserPost)가 중첩되어 있는 구조를 다룬다. 이런 방식은 한 페이지에서 여러 계층의 컴포넌트를 효율적으로 관리할 때 유용하다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Nested Router</title>
</head>
<body>
    <div id="app">
        <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>
        var User = {
            template: `
                <div>
                    User Component
                    <router-view></router-view>
                </div>
            `
        };

        var UserProfile = { template: '<p>User Profile Component</p>' };
        var UserPost = { template: '<p>User Post Component</p>' };

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

        var router = new VueRouter({
            routes
        });

        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

결과

 

  • 네스티드 라우터는 상위 컴포넌트(User) 안에서 하위 컴포넌트(UserProfile, UserPost)를 중첩하여 처리한다.
  • /user 경로에 접속하면 User 컴포넌트가 렌더링되고, 그 안에서 /user/posts 또는 /user/profile로 이동할 때마다 해당 하위 컴포넌트가 router-view에 표시된다.

 

3. 네임드 라우터 예제

네임드 라우터는 페이지 내에서 여러 router-view를 사용해야 하는 경우 유용하다. 네임드 라우터는 각 router-view에 고유한 이름을 부여하고, 라우트 설정에서 그 이름을 참조하여 해당 컴포넌트를 렌더링한다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Named Router</title>
</head>
<body>
    <div id="app">
        <router-view name="header"></router-view>
        <router-view></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>
        var Header = { template: '<div>Header Component</div>' };
        var MainContent = { template: '<div>Main Content Component</div>' };

        var routes = [
            {
                path: '/',
                components: {
                    default: MainContent,   // 기본 router-view에 렌더링
                    header: Header          // 이름이 지정된 router-view에 렌더링
                }
            }
        ];

        var router = new VueRouter({
            routes
        });

        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>
</html>

 

 

설명:

  • 네임드 라우터는 한 페이지에서 여러 router-view를 사용하고 각각 다른 컴포넌트를 렌더링할 때 유용하다.
  • 경로 설정에서 components 속성을 사용하여 각 router-view에 렌더링할 컴포넌트를 지정할 수 있다. 기본 router-view에는 default 컴포넌트를, 이름이 지정된 router-view에는 해당 이름을 가진 컴포넌트를 매핑한다.

 

결론

Vue 라우터는 SPA에서 매우 강력한 기능을 제공한다. 이 포스팅에서는 기본적인 단일 컴포넌트 라우터, 네스티드 라우터, 그리고 네임드 라우터 예제를 다뤘다. 각 방법은 웹 애플리케이션의 복잡성에 따라 적절히 사용할 수 있으며, Vue.js로 동적인 SPA를 쉽게 만들 수 있도록 도와준다.

'웹 개발 > Vue.js' 카테고리의 다른 글

[Vue.js] 컴포넌트 통신  (0) 2024.10.12
[Vue.js] 뷰 컴포넌트  (0) 2024.10.12
[Vue.js] 뷰 인스턴스  (0) 2024.10.11
[Vue.js] Hello Vue.js 프로젝트 만들기  (0) 2024.10.10
[Vue.js] Vue.js란?  (0) 2024.10.10

'웹 개발/Vue.js' Related Articles

티스토리툴바