[vue-router] html5 히스토리 모드

vue-router가 경로를 처리할 때 hash mode와 history mode가 있다.
vue-router의 기본 모드는 hash mode이다.
URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다.
해시를 제거하기 위해 라우터의 history 모드를 사용할 수 있다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고 URL 탐색을 할 수 있다.

export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    }
  ],
});

export default new VueRouter({
  mode: 'history', // 추가
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
    {
      path: '*',
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});

새로고침을 하거나 다른 url을 입력해보면 404 에러가 발생하게 되는데,
이유는 위와 같은 경우는 새로운 페이지를 요청하기 때문이다.
하지만 vue 싱글 페이지 어플리케이션은 새로운 요청에는 경로를 찾아갈 수 없고 앱 내부에서 router를 통해서만 이동이 가능하다.
이러한 문제를 해결하기 위해서는
1. 클라이언트 단에서는 NotFoundPage를 만들어준다.
2. 아래 링크를 참고하여 서버에 간단하게 포괄적인 대체 경로를 추가하면 된다.

https://v3.router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6