1. 직접 다운로드 / CDN https://unpkg.com/vuex 위의 링크는 NPM 기반의 CDN 링크를 제공합니다. 항상 최신 NPM 릴리즈 버전을 가르킵니다. https://unpkg.com/vuex@2.0.0과 같이 특정 버전/태그를 사용할 수 있습니다. vue 선언 뒤에 vuex를 추가하면 자동으로 설치됩니다. 2. NPM / Yarn npm install vuex --save # NPM yarn add vuex # Yarn 위의 코드와 같이 npm과 yarn을 사용하여 설치할 수 있습니다. 위의 방법으로 설치하기 위해서는 Vue.use()를 사용해야 합니다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue..
번들러를 사용하여 앱을 빌드할 때, JavaScript 번들이 커지게 되면 페이지 로드하는데 걸리는 시간이 길어지게 됩니다. 각각 라우트 컴포넌트 단위로 나누고 그 라우트에 방문하게 될 때 파일을 로드하는 것이 더 효율적입니다. 1. Vue의 비동기 컴포넌트 + Webpack의 코드 분할 Vue의 비동기 컴포넌트([Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 참고)와 Webpack의 코드 분할(Code Splitting 참고)을 결합하여 Lazy Loading Route를 쉽게 구현 할 수 있습니다. Vue의 비동기 컴포넌트 비동기 컴포넌트는 Promise를 반환하는 팩터리 함수를 이용하여 만들 수 있씁니다. 컴포넌트 정의는 resolve 함수의 인자로 전달 되어야 합..
client-side 라우팅을 할 때, 새로운 라우트로 이동 할 때 스크롤을 맨 위로 위치하게 하거나, 페이지를 다시 로드 했을 때 스크롤 위치를 유지하게 할 수 있습니다. 심지어 스크롤 위치를 원하는데로 커스터 마이징 할 수도 있습니다. 이 기능은 브라우저가 history.pushState를 제공 해야 동작합니다. 1. scrollBehavior 함수 vue-router 인스턴스를 생성할 때 scrollBehavior 함수를 정의하면 됩니다. const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return desired position } }) 전달 인자 scrollBehavior 함수는 t..
이번 포스트에서는 라우트가 활성화 될 때 서버에서 데이터를 가져오는 2가지 방법에 대해 이야기 할 것입니다. 첫번째 방법은, 네비게이션이 된 후 데이터를 가져오는 방법 입니다. 네비게이션을 먼저 동작하고, 활성화 된 라우트 컴포넌트의 라이프 사이클 훅에서 데이터를 가져오는 방법입니다. 데이터를 가져오는 동안에 로딩 상태를 표시합니다. 두번째 방법은, 네비게이션이 되기 전 데이터를 가져오는 방법입니다. 컴포넌트 내부 가드를 사용하여 네비게이션 되기 전에 데이터를 가져오는 방법입니다. 데이터를 가져오는 것이 끝나면 네비게이션이 동작합니다. 1. 네비게이션이 된 후 데이터 가져오기 이 방법은 즉시 네비게이션이 된 후, 컴포넌트가 렌더링 되어 컴포넌트의 라이프 사이클 훅인, created 훅에서 데이터를 가져오..
는 사실 동적인 컴포넌트이기 때문에 컴포넌트를 사용하는 것과 동일한 방식으로 트랜지션 효과를 적용 할 수 있습니다. 1. 라우트 별 트랜지션 위의 코드와 같이 작성하게 되면 모든 라우트에 동일한 트랜지션을 적용하게 됩니다. 각 라우트 컴포넌트가 서로 다른 트랜지션을 갖도록 하기 위해서는, 각각의 라우트 컴포넌트 내에서 다른 이름으로 을 사용하면 됩니다. const Foo = { template: ` ... ` } const Bar = { template: ` ... ` } 2. 라우트 기반 동적 트랜지션 이동할 라우트와 현재 라우트 간의 관계를 기반으로 동적으로 트랜지션을 결정할 수 있는 방법도 있습니다. // 그런 다음 부모 구성 요소에서 `$route`를 보고 사용할 트랜지션을 결정합니다 watch:..
라우터를 정의할 대 meta 필드를 포함할 수 있습니다. const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // 메타 필드 meta: { requiresAuth: true } } ] } ] }) routes 설정의 각각의 라우터 객체를 라우트 레코드라고 합니다. 라우트 레코드는 중첩 될 수 있기 때문에, 라우터가 일치하면 2개 이상의 라우트 레코드와 일치 할 수 있습니다. 예를 들어, 위의 코드와 같이 라우트를 설정하면, /foo/bar라는 URL로 접속 하였을 때, 상위 레코드와 하위 레코드 2개가 일치하게 됩니다. 라..
네비게이션 가드는 이름에서 알 수 있듯이 리다이렉션하거나 취소하여 네비게이션을 보호하는데 사용됩니다. 전역, 라우트별, 컴포넌트별로 네비게이션 가드를 등록하여 사용할 수 있습니다. 이번 포스트에서는 전역, 라우트별, 컴포넌트 각각의 방법으로 네비게이션 가드를 등록하는 방법을 이야기 하도록 하겠습니다. params나 query가 변경되어도 네비게이션 가드는 실행되지 않습니다. 변경되는 시점을 알고 싶다면, vue 옵션 중 watch 옵션에 $router 객체를 등록하거나 컴포넌트 가드인 beforeRouteUpdate(2.2 버전에서 추가 됨)를 사용해야 합니다. 1. Global Before 가드 router.beforeEach를 사용하여 Gobal Before 가드를 사용할 수 있습니다. const r..
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..