💻 History 모드

Router 이스턴스를 생성할 때 history 옵션을 사용하면 다양한 history mode 중에서 선택할 수 있다.

• Hash - createWebHashHistory()
• History - createWebHistory()
• Memory - createMemoryHistory()

1-1. Hash 모드

Vue Router를 통해 URL로 페이지를 전환할 때 히스토리 관리 기법을 해시(#)형으로 쓸 수 있게 해준다. 해시모드는 createWebHashHistory()를 사용하여 생성

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
	history: createWebHashHistory(),
  	router: [
    	....  
    ]
})

내부적으로 전달되는 실제 URL 앞에 해시 문자(#)를 사용한다. URL의 이 섹션은 서버로 전송되지 않으므로 서버 수준에서 특별한 처리가 필요하지 않는다. 그러나 그것은 SEO에 나쁜 영향을 미친다. Hash는 지양하며 HTML5모드(createWebHistory())를 사용하자

1-2. History 모드(html5 모드)

Vue Router를 통해 URL로 페이지를 전환할 때 히스토리 관리 기법을 해시(#)없이 쓸 수 있게 해준다. Web API인 history.pushState()를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다. HTML5 모드는 createWebHistory()로 생성되며 권장 모드이다.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
	history: createWebHistory(),
  	routes: [
      ...
    ]
})

createWebHistory()를 사용하면 URL은 "정상"으로 보인다. 하지만 여기에 문제가 있다. 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/user/id에 접속하면 404 오류가 발생한다. 이 문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하면 된다. URL이 정적 에셋과 일치하지 않으면 앱이 있는 동일한 index.html페이지를 제공해야 한다.

💡 hash와 history의 차이는 #이 붙고 안 붙고의 차이다. 정확한 차이는 운영 서버에 배포할 때 일어난다.