[Vue.js] Router

Router

라우터는 페이지를 이동할 때 사용하는 Vue 공식 라이브러리 입니다. 라우터를 cdn으로 다운로드 받고, vue src 아래에 추가해줍니다. 아래는 Vue 객체 내 라우터를 설정한 코드입니다.

  <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 router = new VueRouter({

    });

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

라우터 객체에는 path와 component가 key:value로 작성되어야 합니다.

  <div id="app">
    <router-view></router-view>
  </div>
  <script>
    var LoginComponent = {
      template: '<div>login</div>'
    }

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

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

/login이나 /main페이지로 이동했을 때 등록한 컴포넌트 LoginComponent, MainComponent가 <router-view>안에 주입됩니다. <router-view는 Vue에 라우터가 설정되어있을 때 View로 띄워주는 태그입니다. 따라서 라우터 설정이 되지 않았을 때 사용할 경우 콘솔에러가 뜹니다.

링크를 클릭했을 때 라우터 객체에 따라 페이지를 이동하는 기능은 router-link를 사용해 구현합니다.

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

<router-link>는 anchor(<a href=""></a>) 태그와 같이 링크형태로 노출되며 클릭 시 등록된 라우터 path가 있다면 컴포넌트까지 실행해줍니다.

---

참고자료:

• 인프런 - 캡틴판교 Vue.js 시작하기