[Vue] Router History mode & Hash mdode

Vue Router 에는 HTML 5 History mode와 Hash 모드 두 가지가 존재합니다.

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

const router: Router = createRouter({
  history: createWebHistory(),
  //history: createWebHashHistory(),
  routes: [
    {name: 'home', path: '/', component: Home}
  ]
});

 

차이는 간단합니다

URL 을 보면

// web history
https://localhost:5173/brazil

// hash history
https://localhost:5173/#/brazil

 

History Mode

SPA 환경에서 모든 라우트 요청은 프로젝트 root index.html 파일이 받게 되며,

라우트 경로에 따라 index.html에 동적으로 페이지가 구성됩니다.

이 모든 것은 vue router 가 내부적으로 HTML5 history API 를 사용하여 처리하기에,

겉으로 보기에는 요청 주소에 해당하는 index 페이지가 보여지는 것처럼 보입니다.

서버(SSR) 환경 또한 크게 다르지 않습니다.

 

Hash Mode

전통적인 서버 환경에서 하위 패스는 실제 디렉토리와 그 디렉토리에 해당하는 index.html 파일이 존재합니다.

하지만 서버 사이드에서 SPA로 HTML5 History mode 가 동작하기 위해서는

모든 요청이 entry index 파일로 전달되도록 서버 설정이 필요합니다.

해시 모드는 위와 같은 서버 설정없이 URL을 파일 경로를 표현하여 동작하도록 해줍니다.

하지만 결과적으로 두 가지 단점이 있습니다.

• 시각적으로 보기 좋지 않다.
• SEO(Search Engine Optimize) 가 정상적으로 되지 않는다.