Vue Router의 history옵션의 모드 (history, hash)

Vue Router의 다양한 history 모드와 hash 모드

🍃history 모드

- router 인스턴스의 history 옵션을 사용하면 history옵션의 다양한 모드를 선택할 수 있다.

 

(1) Hash 모드

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

 

- history: createWebHashHistory()

- 히스토리 관리 기법을 해시(#)형으로 쓸 수 있다.

- 내부적으로 전달되는 실제 url 앞에 #이 붙는다. →  localhost:3000/#/posted

 

(2) History 모드

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

 

- history: createWebHistory()

- 히스토리 관리 기법을 해시(#) 없이 쓸 수 있다.

- url 앞에 #이 안붙어서 정상적으로 보인다. → localhost:3000/posted

 

※ 파라미터를 넘기는 경우

history: createWebHistory('/base')

localhost:3000/base/posted 기본경로 '/base'가 붙는다.

 

 

🍃Hash 모드와 History 모드의 차이점

Hash	History
localhost:3000/#/posted 로 호출 → 실제론 localhost:3000/ 만 호출	localhost:3000/posted 를 호출 → 그대로 localhost:3000/posted 를 호출
서버에 추가 설정 없이 바로 배포가 가능	서버에 추가 설정을 해줘야함

- Hash와 History 모드의 차이는 운영서버에 배포할 때 생긴다.

- Hash모드의 경우 내부적으로 전달되는 실제 url 앞에 #이 붙으며 # 뒤의 url은 서버로 전송되지 않는다.

- History모드의 경우 url 전체를 서버에 요청한다.

 

- 대부분의 서버는 루트로만 요청을 하면 index.html을 반환한다.

- History 모드의 경우 해당 경로에 index.html이 없어서 404 에러가 뜬다.

즉, History 모드로 배포를 할 때는 서버에 추가 설정을 해줘야한다. (번거로움... + 서버 또한 설정이 가능해야함)

 

- Hash 모드의 경우 어짜피 루트만 요청을 하니 바로 배포가 가능하다. (간단)

- 하!지!만! 웹 크롤러는 검색 엔진이 웹사이트의 내용을 수집할 때 http와 url 스펙을 따르는데 hash 방식으로 만들어진 웹사이트의 경우 웹 크롤러가 내용을 수집할 수 없기 때문에 검색엔진최적화(SEO)에 나쁜 영향을 끼친다.

- 그러니 History 모드를 사용하자