뷰(Vue) 라우터(Router)

프로그래밍 노트/Vue

뷰(Vue) 라우터(Router)

깡냉쓰 2019. 9. 30. 21:41

728x90

라우팅이란?

라우팅 이란 웹 페이지 간의 이동 방법을 말함.
라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용

뷰 라우터

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수있도록 지원하는 공식 라이브러리.
뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있음
<router-link to="URL">

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

<router-view>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>뷰 라우터 실습하기</h1>
        <p>
            <router-link to="/main">메인 컴포넌트로 이동</router-link>
            <router-link to="/login">로그인 컴포넌트로 이동</router-link>
        </p>
        <!-- URL값에 따라 갱신되는 화면 영역 -->
        <router-view></router-view>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
    // Main, Login 컴포넌트 정의
    var Main = {template : "<div>main</div>"};
    var Login = {template : "<div>Login</div>"};

    // 각 URL에 맞춰 표시할 컨포넌트 지정
    var routes = [
        {path : "/main", component : Main},
        {path : "/login", component : Login}
    ];

    // 뷰 라우터 정의
    var router = new VueRouter({
        routes
    });

    // 뷰 인스턴스에 라우터 추가
    var app = new Vue({
        router
    }).$mount("#app"); // $mount는 el속성과 같이 인스턴스를 화면에 붙여주는 역할 수행
</script>
</html>

네스티드 라우터

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view> <!-- User 컴포넌트가 뿌려질 영역 -->
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
    var User = {
        // User 컴포넌트 하위에 컴포넌트가 뿌려질 영역(<router-view>)
        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>
</html>

네임드 뷰

네임드뷰(Naed View)는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
네스티드 라우터 는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만,
네임드 뷰 는 같은 레벨에서 여러 개의 컴포넌트를 한번에 표시할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view name="header"></router-view>
        <router-view></router-view> <!-- name이 없는 경우 default -->
        <router-view name="footer"></router-view>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
    var Body = {template : "<div>This is Body</div>"};
    var Header = {template : "<div>This is Header</div>"};
    var Footer = {template : "<div>This is Footer</div>"};

    // <router-view>의 name 속성과 컴포넌트를 연결
    var router = new VueRouter({
        routes : [
            {
                path : "/",
                components : {
                    default : Body,
                    header : Header,
                    footer : Footer
                }
            }
        ]
    });

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

728x90