라우팅의 종류와 필요성

라우팅 종류

1. 서버 라우팅(네이버, 구글 etc...)

- 매번 파라미터에 주소를 요청해서 화면 전체를 새로고침하는 형태.

2. 브라우져 라우팅(구글 메일, 트렐로 etc...)

- 파라미터에 주소를 요청하지만 화면 전체를 새로고침하지 않고 필요한 부분만 새로고침하여 좀 더 효율적으로 화면을 갱신한다는 장점이 있음.

* 라이브러리를 사용하지 않고 만든 router

import Vue from 'vue'
import App from './App.vue'

const Login = { template: '<div>Login Page</div>'} // Login 컴포넌트 생성

const routes = {
  '/': App,
  '/login': Login
} // routes를 생성 후 주소값 뒤 인자값에 따라 서로 다른 컴포넌트를 불러올 수 있도록 설정.

new Vue({
  el: '#app',
  computed: {
    VueComponent() {
      console.log(window.location.pathname) // 파라미터 경로를 받아오는 명령어 window.location.pathname
      return routes[window.location.pathname] || // pathname에 따라서 컴포넌트를 리턴할 수 있게 설정.
        { template: '<div>Page Not Found</div>'}
    }
  },
  render(h) { // 주소값을 불러와서 값에 따른 컴포넌트를 불러 올 수 있게 설정.
    return h(this.VueComponent) // 주소값에서 가져온 값을 이용해서 VueComponent 함수를 실행
  }
})

- Vuejs. 진영에서는 라우터를 쉽게 사용 할 수 있게 해주는 라이브러리인 Vue-Router를 가장 많이 사용함.

트렐로 개발을 통한 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

강사: 김정환

인프런 강의 링크:   https://www.inflearn.com/course/vuejs/

* 본 포스팅은 김정환 강사님의 

트렐로 개발을 통한 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술 강의를

정리한 글로 사전에 동의를 받아 작성하였습니다.