[Vue.js] 기초-뷰 라우터

Taeho Min·2021년 9월 28일

Vue.js

목록 보기

2/7

1. Vue 라우터 개요

Vue 라우터는 Vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 구현할 때 필요한 태그와 기능은 다음과 같다.

<router-link to="URL">

→ 페이지 이동 태그, 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동

<router-view>

→ 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

[뷰 라우터 실습]

<html>
    <head>
        <title>Vue Router Sample</title>
    </head>
    <body>
        <div id="app">
            <h1>뷰 라우터 예제</h3>
            <!-- 1) 화면 상에는 <a> 버튼 태그로 변환되어 표시 된다.
                    각 버튼을 클릭하면 to=""에 정의된 텍스트 값이 브라우저 URL 끝에 추가된다.
            -->
            <p>
              <router-link to="/main">Main 컴포넌트로 이동</router-link>
              <router-link to="/login">Loing 컴포넌트로 이동</router-link>
			</p>  
            <!-- 2) 갱신된 URL에 해당하는 화면을 보여주는 영역 -->
            <router-view></router-view>
        </div>      
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <!-- 3) 라우터 CDN 추가 -->
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
        <script>
            // 4) Main, Login 컴포넌트 정의
            var Main = { template: '<div>main</div>' };
            var Login = { template: '<div>login</div>' };
            
            // 5) routes 변수에 path와 컴포넌트 매핑을 지정
            var routes = {
                { path: '/main', component: Main },
                { path: '/login', component: Login },
            };
            
            // 6) VueRouter 인스턴스를 생성하고, routes를 삽입
            var router = new VueRouter({
                routes
            });
            
            // 7) 뷰 인스턴스에 라우터 추가
            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>

$mount() API

$mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도, 생성하고 나서 $mount()를 이용하여 강제로 인스턴스를 화면에 붙일 수 있다. 뷰 라우터 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음, 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내하고 있다.

라우터 URL의 해시 값(#)을 없애는 방법
뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드를 활용하면 된다.
var router = new VueRouter({
    mode: 'history',
    routes
)};

2. 네스티드 라우터

Nested Router는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조이다.

네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌트에도 <router-view>가 있고, 하위 컴포넌트에도 <router-view>가 있다는 것이다.

네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다.

[네스티드 라우터 구현]

<html>
    <head>
        <title>Vue Nested Router Sample</title>
    </head>
    <body>
        <div id="app">
            <!-- 1) User 컴폰너트가 나타나는 영역-->
            <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>
            // 2) 컴포넌트 정의
            var User = {
                template: '
                    <div>
                        User Component
                        // 3) 하위 컴포넌트가 표시될 영역
                        <router-view></router-view>
                    </div>
                '
            };
            var UserProfile = { template: '<p>User Profile Component</p>' };
            var UserPost = { template: '<p>User Post Component</p>' };
            
            // 4) 네스티드 라우터 정의
            var routes = [
                {
                    path: '/user',
                    component: User,
                    children: [
                    	{ 
                            path: 'posts',
                            component: UserPost
                        },
                        {
                            path: 'profile',
                            component: UserProfile
                        },
                    ]
                }
            ];
            
            // 5) 뷰 라우터 정의
            var router = new VueRouter({
                routes
            });
            
            // 6) 뷰 인스턴스에 라우터 추가
            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>

3. 네임드 뷰

네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

[네스티드 라우터 구현]

<html>
    <head>
        <title>Vue Named View Sample</title>
    </head>
    <body>
        <div id="app">
            <!-- 1) 라우팅 영역 정의 -->
            <router-view name="header"></router-view>
            <!-- 1.1) name이 없는 경우 디폴트 -->
            <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>
            // 2) 컴포넌트 내용 정의
            var Body = { template: '<div>This is Body</div>' };
            var Header = { template: '<div>This is Header</div>' };
            var Footer = { template: '<div>This is Footer</div>' };
            
            // 3) 라우터 정의
            var router = new VueRouter({
                routes = {
                    path: '/',
                    components: {
                        default: Body,
                        header: Header,
                        footer: Footer
                    }
                }
            });
            
            // 4) 뷰 인스턴스에 라우터 추가
            var app = new Vue({
                router
            }).$mount('#app');
        </script>
    </body>
</html>