Vue.js - Router

router Intro

: 뷰를 이용하여 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이브러리

뷰에서 화면이 전환될 때, 전환하는 행위를 Route

Vue Router CDN

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

router 옵션

• routes : 페이지의 라우팅 정보를 담는 배열 형태,   페이지의 수만큼 객체 생성
  1. path : 페이지의 url
  2. component: 해당 url에 표시될 컴포넌트
  
  

router-view

• 특정 url의 component가 뿌려지는 영역

router-link

• 화면 클릭을 통해 페이지 이동할 수 있게 하는 링크
• a 태그와 비슷한 기능

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

router 예제

    <div id="app">
      <router-link to="/login">Login</router-link>
      <router-link to="/main">Main</router-link>
      <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 : [
                // 로그인 페이지 정보
                {
                    path: '/login',
                    component: LoginComponent
                },

                // 메인 페이지 정보
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        });
      
        new Vue({
            el: '#app',
            router: router
        });
    </script>

Vue 인스턴스

• 왼쪽 router는 인스터스 속성, 오른쪽 router는 변수