뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다.

뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.


<router-link to="URL값"> : 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동한다.

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title></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://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
 
<script>
    var Main = {template: '<div>main</div>'};
    var Login = {template: '<div>login</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>
cs




login  |  main  이동 라우터 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <div id="app">
        <div>
            <router-link to="/login">Login</router-link><br>
            <router-link to="/main">Main</router-link>
        </div>
        <!-- 페이지 표시태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 -->
        <router-view></router-view>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 
    <script>
        var LoginComponent = {
            template : '<div>logincomponent</div>'
        }
 
        var MainComponent = {
            template : '<div>maincomponent</div>'
        }
 
        var router = new VueRouter({
           // '#'해시 없애기 깔끔한 url
            mode: 'history',
           //페이지의 라우팅 정보(배열)
            routes : [
                { 
                    //첫번째 페이지
                    path: '/login',
                    //해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {
                    path: '/main',
                    component: MainComponent
                } //두번째 페이지
            ]
        });
 
        new Vue({
            el: '#app',
            //라우터속성 : 라우터변수
            router : router
        });
    </script>
</body>
</html>
cs


































저작자표시

'Vue' 카테고리의 다른 글

뷰리소스  (0) 2019.08.02
네스티드 라우터(Nested Router), 네임드 뷰(Named View)  (0) 2019.08.02
이벤트 버스 형식  (0) 2019.08.01
props, event emit 컴포넌트의 유효범위  (0) 2019.07.31
css 클래스 바인딩  (0) 2019.07.31

+ Recent posts

티스토리툴바