라우팅
디렉토리
공식 노선
대부분의 단일 페이지 애플리케이션의 경우 공식적으로 지원되는 vue-router 라이브러리를 사용하는 것이 좋습니다. 자세한 내용은 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를 사용한 완전한 예제입니다.
