라우팅

카탈로그

1. 1. 공식 라우터
2. 2. 단순한 라우팅 시작하기
3. 3. 써드파티 라우터 목록

공식 라우터

대부분의 단일 페이지 애플리케이션의 경우 공식적으로 지원되는 vue-router library를 사용하는 것이 좋습니다. 자세한 내용은 vue-router의 문서를 참조하십시오.

단순한 라우팅 시작하기

매우 단순한 라우팅만 필요하고 완전한 기능을 갖춘 라우터 라이브러리를 사용하지 않으려면 다음과 같이 페이지 수준 컴포넌트를 동적으로 렌더링하면됩니다.

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

HTML5 History API와 결합하여 매우 기본적이지만 기능이 완벽한 클라이언트측 라우터를 구축할 수 있습니다. 이를 실제로 보려면 예제 앱을 확인하십시오.

써드파티 라우터 목록

써드파티 라우터를 사용하기 위해서, 예를 들어 Page.js 또는 Director는 쉽습니다. 여기에 Page.js를 사용하는 완벽한 예제가 있습니다.