beomy

를 사용하여 선언적 네이게이션용 앵커(anchor) 태그를 만드는 것 외에도 vue-router의 인스턴스 메소드를 사용하여 프로그래밍으로 네비게이션을 수행할 수 있습니다. 1. router.push(location, onComplete?, onAbort?) Vue 인스턴스 내부의 $router를 사용하여 this.$router.push와 같이 사용할 수도 있습니다. router.push는 다른 URL로 이동할 때 사용됩니다. 이 메소드는 새로운 URL을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL로 이동하게 됩니다. 를 클릭하면 router.push(...)를 호출하는 것과 같습니다. 전달 인자 전달인자는 문자열 또는 객체가 될 수 있습니다. // 리터럴 str..

실제 앱 UI는 일반적으로 여러 단계의 중첩 된 컴포넌트로 이루어져 있습니다. URL의 세그먼트(/로 구분 되는 각각의 문자열)는 중첩된 컴포넌트의 특정 구조와 일치하는 경우가 매우 많습니다. 예를 들면, /user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ vue-ro..

패턴을 가진 라우트를 동일한 컴포넌트에 매칭시켜야 할 경우가 종종 있습니다. 예를 들면, User 컴포넌트가 있고, /user/1 혹은 /user/2와 같은 라우트에 접근할 때, 라우트에 매칭된 ID에 해당하는 유저 정보를 User 컴포넌트에 나타내야 한다면, const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', component: User } ] }) 위의 코드와 같이 vue-router 설정을 할 수 있습니다. /user/1와 /user/2는 모두 동일한 컴포넌트에 매칭됩니다. 동적 세그먼트는 콜론(:)으로 표시됩니다. 동적 세그먼크 값은 모..

vue-router는 Vue.JS의 공식 라우터입니다. vue-router를 사용하면 싱글 페이지 어플리케이션을 쉽게 만들 수 있습니다. 이번 포스트에서는 vue-router를 프로젝트에 추가할 때 HTML단과 JavaScript단에서 추가하는 방법에 대해 이야기 할 것입니다. 1. HTML Hello App! Go to Foo Go to Bar 는 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가됩니다. 2. JavaScript // 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요 // 그리고 `Vue.use(VueRouter)`를 호출하세요 // 1. 라우트 컴포넌트를 정의하세요. // 아래 내용들은 다른 파일..