[vue.js] 뷰 라우터

router.html

# 뷰 라우터

- 뷰라이브러리를 이용해 싱글페이지 어플리케이션을 구현

- 페이지 이동을 구현하는 라이브러리

- 구글에 vue router 검색 후, cdn 링크로 스크립트로 가져오면 적용해 볼 수 있다.

- 추후, npm 라이브러리로 적용한다.

 // 3. Root로 사용할 엘리먼트 선언

  <div id="app">

    <div>

      // 12. <router-link> 태그로 라우터 이동 구현

      // to="라우터 url" 속성으로 지정 가능

      // Tip. routerLink*2를 입력하면 바로 입력된다.

      <router-link to="/login">Login</router-link>

      <router-link to="/main">Main</router-link>

    </div>

    // 11. <router-view> 태그 선언

    // 뷰 인스턴스 내에 router 속성으로 정의하지 않으면 에러남

    // Router 내 여러 페이지 중 하나가 표시된다.

    <router-view></router-view>

  </div>

  // 1. Vue 스크립트 선언

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

  // 2. Vue Router 스크립트 선언(순서 주의)

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

  <script>

    // 10. 컴포넌트 속성 지정

    var LoginComponent = {

      template: '<div>login</div>'

    }

    var MainComponent = {

      template: '<div>main</div>'

    }

    // 5. Vue Router 정의

    var router = new VueRouter({

      // 페이지의 라우팅 정보

      // 페이지의 개수만큼 배열로 존재

      // 7. 라우팅 페이지 정의

      // routes : <배열>      

// mode: 'hash or history' // link에 #을 붙일 것인가?

      routes: [

        // 로그인 페이지 정보

        {

          // 페이지의 url

          // 8. 페이지 url 지정

          // path: <url>

          path: '/login',

          // name: 'login',

          // 해당 url에서 표시될 컴포넌트

          // 9. 페이지 컴포넌트 지정

          // component: <컴포넌트 변수명>

          component: LoginComponent

        },

        // 메인 페이지 정보

        {

          path: '/main',

          component: MainComponent

        }

      ]

    });

    // 4. Vue 인스턴스 정의

    new Vue({

      el: '#app',

      // 6. Vue Router 매핑&등록(해당 뷰 인스턴스에서 해당 라우터를 사용하겠다.)

      // router : <router 변수명> 속성 

      router: router,

    });

  </script>