vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 URL이 변경될 때 페이지가 다시 로드되지 않습니다. 해시를 제거하기 위해 vue-router는 history 모드도 지원합니다. history.pushState API를 사용하여 페이지를 다시 로드하지 않고 URL을 변경 할 수 있습니다. const router = new VueRouter({ mode: 'history', routes: [...] }) 위의 코드와 같이 history 모드로 설정 할 수 있습니다. history 모드를 사용할 때, 처음 경로 부터 쭉~ 사용한다면 문제없이 정상적으로 동작합니다. 하지만 중간 경로로 직접 접속하면 404 오류가 발생합니다. http://서버주소/user/1와 같은 URL..
컴포넌트에서 $route를 사용하게 되면, 컴포넌트가 URL에 의족적이게 되어 재사용성이 떨어지게 됩니다. 이 의존성을 제거하기 위해서는 props 옵션을 사용하면 됩니다, const User = { template: 'User {{ $route.params.id }}' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 위의 코드는 $route를 사용한 예제입니다. URL에 의존적이기 때문에 다른 URL를 가지는 컴포넌트에서 재사용하기 어렵습니다. const User = { props: ['id'], template: 'User {{ id }}' } const router = new VueRouter..
1. Redirect 리다이렉션은 vue-router를 설정할 때 정의 할 수 있습니다. 예를 들어 /a라는 URL로 접속할 때, /b라는 URL로 리다이렉션을 시켜주고 싶다면, const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 위의 코드와 같이 vue-router를 설정 할 수 있습니다. const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 위의 코드와 같이 Named router를 사용할 수도 있습니다. const router = new VueRouter({ routes: [ { path: '/a', redirec..
1. Named Routes vue-router를 사용할 때, 이름이 있는 라우트를 사용하는 것이 더 편리할 때가 있습니다. const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) 위의 코드와 같이 라우트를 설정하였다면, User 혹은, router.push({ name: 'user', params: { userId: 123 }}) 를 이용하여 라우터를 변경 할 수 있습니다. 위의 두가지 모두 /user/123으로 경로를 이동합니다. 2. Named Views 여러개의 view를 중첩하지 않고 동시에 표시해야 할 경우, 이름을 갖는 v..
를 사용하여 선언적 네이게이션용 앵커(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. 라우트 컴포넌트를 정의하세요. // 아래 내용들은 다른 파일..
Vue의 가장 두드러지는 특징 중 하나는 눈에 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 모델이 수정되면 화면이 갱신됩니다. 이번 포스트에서 이러한 반응형 시스템을 좀 더 자세히 알아보려고 합니다. 1. MVVM 패턴 Vue는 MVVM 패턴에 영감을 받은 프레임워크입니다. 위의 그림은 MVVM 패턴을 나타내는 그림입니다. 더 자세한 설명은 [디자인패턴] MVC, MVP, MVVM 비교를 참고 바랍니다. View는 DOM, View Model은 Vue, Model은 단순한 JavaScript 객체 입니다. View Model은 View와 데이터 바인딩되어 View Model이 변경 되 었을 때 View가 업데이트 됩니다. 2. 변경 내용을 추적하는 방법 Vue 인스턴스에..
1. 필터 사용방법 Vue는 텍스트 형식화 할 수 있는 필터 기능을 제공합니다. 필터는 중괄호 보간법, v-bind 표현법(2.1.0+ 부터)에서 사용 할 수 있습니다. 필터는 JavaScript 표현식 마지막의 파이프(|) 기호와 함께 사용해야 합니다. {{ message | capitalize }} 2. 로컬 필터 정의 컴포넌트의 옵션으로 로컬 필터를 정의할 수 있습니다. filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }3. 전역 필터 정의 Vue 인스턴스 생성 전(new Vu..