[Vue.js] Vue Router 해시모드와 히스토리 모드

- URL 해시

#id를 사용해 지정한 anchor(책갈피)로 이동 (한 페이지 내에서 특정 요소 위치로 이동)

 

Vue Router에서는 기본적으로 해시모드를 사용하나 아래와 같이 히스토리 모드를 사용할 수도 있다.

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

hash mode 에서는 URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않으나 history모드에서도 history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.

 

url에 #이 포함되지 않길 원하면 히스토리 모드를 사용한다.

 

• 해시 모드가 아닌 히스토리 모드에서 서버는 이 페이지가 새로운 페이지라는 것을 알지 못한다. 예를 들어, 로그인 링크를 클릭했을 때 url이 이동을 하더라도 서버 입장에서는 모른다.
• 따라서 히스토리 모드에서는 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/login 에 접속하면 404 오류가 발생한다.
  
  • HTML5 히스토리 모드 | Vue Router

HTML5 히스토리 모드 | Vue Router