상세 컨텐츠

본문 제목

[Vue] Vue 라우터

Frontend/Vue

by 사랑짱 2021. 9. 20. 22:14

본문

https://joshua1988.github.io/vue-camp/vue/router.html#%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5

 

Router | Cracking Vue.js

뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM

joshua1988.github.io

 

 

◆ 뷰 라우터

 

- 페이지를 이동할 때 사용하는 공식 라이브러리이자 기능

- 뷰에서 싱글 페이지 어플리케이션, 페이지 간 이동하는 기능을 구현할 때 사용

 

 


 

 

◆ 뷰 라우터 설치

 

- 뷰 스크립트 → 뷰 라우터 순으로 import

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

 

 


 

 

◆ 뷰 라우터 등록

 

Step1. router 인스턴스 생성

Step2. Vue 인스턴스 생성

Step3. Vue 인스턴스의 router 속성에 router 인스턴스 등록

        결과적으로 뷰라우터의 속성을 주입하는 것과 동일

 

 

 


 

 

◆ 뷰 라우터 옵션

 

 mode : url의 해쉬 값을 없애는 속성

※ routes : 페이지의 라우팅 정보(어떤 url로 이동했을 때 어떤 컴포넌트와 연결되는지)

 - path : 페이지의 url

 - component : 해당 url에서 표시될 하나의 컴포넌트를 연결하는 속성

 

 

 


 

 

◆ router-view

- 라우터와 연결되는 영역

- URL이 변경되었을 때 특정 URL에 따라 뿌려지는 컴포넌트의 영역

 

◆ router-link

- 라우터에서 페이지 이동을 위한 링크태그

 

 

※ 라우터 학습 코드

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
57
<!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>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <!--router-link : 라우터에서 페이지 이동을 위한 링크태그-->
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>     
        </div>
        <!--router-view : 라우터와 연결-->
        <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>login</div>'
        }
 
        var MainComponent = {
            template: '<div>main</div>'
        }
 
        var router =  new VueRouter({
            //routes 속성 : 페이징의 라우팅 정보(어떤 url로 이동했을 때 어떤 url이 나타날지)
            //페이지의 개수만큼 객체의 형태로 배열로 담긴다.
            routes : [
                //1. 로그인페이지 정보
                {
                    //페이지의 url
                    path: '/login',
                    //해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                //2. 메인 페이지 정보
                {
                    path: '/main',
                    component: MainComponent
                }
            ],
        });
        
        //Vue 인스턴스
        new Vue({
            el: '#app',
            router: router  //위에서 정의한 router 변수를 의미
        });
    </script>
</body>
</html>
cs

관련글 더보기