vue의 router설정

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

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

vue-router는 다음과같이 history를 설정할 수 있는데 이때
createWebHashHistory()를 사용하여 해시 모드를 사용하거나
createWebHistory()를 사용하여 HTML5모드를 사용할 수 있다.

해시모드

해시모드의 경우

URL에 # 문자가 사용되는 차이가 있다.
하지만 URL의 해당 부분(#)은 서버로 전송되지 않으므로 서버 수준에서 특별한 처리를 필요로하지 않는다.

URL이 변경될 때 페이지가 다시 로드 되지 않는 장점이 있다.

HTML5 모드

HTML5모드의 경우
우리가 평소에 보던 URL과 같다.

해시모드의 #문자가 사용되는 것 보다는 더 깔끔(?)해보인다.

하지만 별다른 서버 구성이 없는 SPA의 경우 사용자가 https://splendid-churros-52cd3d.netlify.app/id 로 직접 액세스하면(해당 url에 접근해서 새로고침하는것도 포함) 404 error가 발생한다.

실제로 404 error가 발생할 수도 있고 아닐수도 있다. 이는 프로젝트 서버와 통신을 어떻게 하느냐에 따라 다르다는 것이다.

어떻게 활용해야 할까?

vue-router 공식문서에는 해시모드에 대해 이렇게 적혀있다.
hash모드의 사용은 SEO에 악영향을 미친다.
웹 크롤러는 검색 엔진이 웹사이트의 내용을 수집하기 위해 HTTP와 URL 스펙을 따르는데
이때 자바스크립트를 실행시키는 것은 아니기때문에 hash 방식으로 만들어진 웹사이트의 경우는 웹 크롤러가 내용을 수집할 수 없기때문이다. 구글의 경우 해시뱅을 일반 URL로 변경시켜 이 문제를 해결했지만 다른 검색 엔진은 그렇지 않을수 있기 때문이다.

상황에 따라 다르겠지만 HTML5모드를 사용하더라도 catch all을 사용하여 404 페이지를 구현 할 수 있기때문에 SEO를 신경써야한다면 HTML5모드가 유리할 것 같다.