1. 뷰 라우터

뷰에서 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리
페이지 이동과 관련된 기능을 라우터로 구현한다.

CDN 방식 사용법

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

뷰 라우터 등록 예시

<div id="app"></div>
    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script>
    // 라우터 인스턴스 생성
    var myrouter = new VueRouter({
          //라우터 옵션  
    });
    //인스턴스에 라우터 인스턴스를 등록
    new Vue({
        el: '#app',
        router: myrouter
    });
</script>

결과 확인

출처 : https://router.vuejs.org/kr/installation.html

2. routes 속성 설명

<div id="app">
    <router-view></router-view>
</div>

<script>
    var LoginComponent = {
        template: '<div>login</div>'
    }
    var MainComponent = {
        template: '<div>main</div>'
    }

    var myrouter = new VueRouter({
        // 페이지의 라우팅 정보
        routes: [
            // 로그인 페이지 정보
            {
                //페이지의 url
                path: '/login',
                // 해당 url에서 표시될 컴포넌트
                component: LoginComponent
            },
            // 메인 페이지 정보
            {
                path: '/main',
                component: MainComponent
            }
        ]
    });

    new Vue({
        el: '#app',
        router: myrouter
    });
</script>

3. 링크를 이용한 페이지 이동 및 router-link 태그 설명

사용자는 url을 다 입력해서 페이지를 이동하지 않는다. 화면을 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link> 이다. <a> 태그 느낌 RGRG

사용방법

<router-link to="이동할 url"></router-link>

링크 생성 예시

<div id="app">
    <div>
        <router-link to="/login">Login</router-link>
        <router-link to="/main">Main</router-link>
    </div>
    <router-view></router-view>
</div>

주의

해당 페이지마다 뿌려질 컴포넌트는 하나! component

하나의 인스턴스에 등록할 컴포넌트는 여러 개! components