HTML5 히스토리 모드(history mode) and 해시백 모드(hash mode)

vue-router를 사용하게되면 해시백 모드와 히스토리 모드 중 기본모드로 해시백모드가 적용됩니다.

해시백 모드는 URL 해시를 사용하여 전체 URL을 시뮬레이트하게되는데 URL이 변경될 때 페이지가 다시 로드되지 않습니다.

vue-router 사용 중 해시를 제거하기 위해서는 라우터의 history 모드를 설정할 수 있다.

history.pushState API를 활용하여 다시 로드하지 않고 URL 탐색을 할 수 있다.

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

이렇게 히스토리 모드를 설정한 후 다시 페이지를 로드해보면 #(해시백) 없이 사용이 가능하다.

주의사항!

히스토리 모드를 사용하게되면 서버는 404 에러를 보고하지 않는 문제가 생길 수 있다.

그 이유는 발견되지 않은 경로가 이제 index.html 파일에서 제공하기 때문이다.

이 문제를 해결하려면 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해야 한다.

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

또는 Node.js 서버를 사용할 경우 서버 측 라우터를 사용하여 들어오는 url을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있다.