Vue-router 히스토리 모드

HTML5 히스토리 모드

vue-router의 기본 모드는 hash(#) mode이다.
url 해시(#)를 사용하여 전체 url을 만들기 때문에 url이 변경될 때 페이지가 다시 로드 되지 않는 것이다.

url에서 해시(#)를 제거하려면 라우터의 history 모드를 설정하면 된다.
history 모드를 설정하면 history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 url 탐색을 할 수 있다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

히스토리 모드를 사용하면 url이 정상(해시가 사라진 모습)으로 보인다.

그러나 문제는 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 해당 url에 접속하면 404 오류가 발생한다.
(localhost 인 개발 서버는 문제가 되지 않으나, 빌드 후 서버 url에 접속하면 오류 발생)

문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면 된다.
url이 정적 에셋(static asset)과 일치하지 않으면 앱이 있는 동일한 index.html 페이지를 제공해야 한다.

서버 설정 예제

url이 정적 에셋(static asset)과 일치하지 않으면 index.html 페이지를 제공하는 로직이다.

• Apache

  <IfModule mod_negotiation.c>
   Options -MultiViews
  </IfModule>
  <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
  </IfModule>

• nginx

  location / {
   try_files $uri $uri/ /index.html;
  }

주의 사항

서버는 404 에러를 보고하지 않는다.
왜냐하면 발견되지 않은 모든 경로가 이제 index.html 파일을 제공하기 때문이다.
이 문제는 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해서 해결해야 한다.

const router = new VueRouter({
  mode: 'history',
  routes: [{ path: '*', component: NotFoundComponent }]
})