[Vue.js] vue-router hash 모드 vs history 모드

Vue-router를 사용하면 기본적으로 hash 모드로 router가 동작을 한다.

 

hash모드로 동작할 경우 url에 아래와 같이 # 이 붙는다.

 

http://localhost:9090/#/user

 

그러면 위 #을 url에서 없애려면 어떻게 해야 할까?

 

router 설정에서 history 모드로 설정을 해주면 된다.

 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history', // mode에 history 값을 설정하여 history모드로 변경한다.
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/top',
      name: 'Top',
      component: {
        template: '<div>최상위페이지</div>'
      }
    },
    {
      path: '/users',
      name: 'Users',
      component: {
        template: '<div>사용자 목록 페이지</div>'
      }
    }
  ]
})

 

위와 같이 설정을 하면 url 중간에 # 가 붙는 것을 없앨 수 있다.

 

그러면 두 모드 간의 차이점은 무엇일까?

 

page 네비게이션 중에 base url + 특정 url을 브라우저에서 요청할 경우 전체 리소스 재로딩 발생 유무가 큰 차이점이다.

Hash 모드에서는 중간에 http://localhost:9090/user 와 같이 다른 url을 요청하면 전체 리소스 로딩없이 SPA page 이동만 일어난다.

 

History 모드에서는 page 재로딩이 다시 발생한다.

 

따라서 history 모드에서는 없는 page의 경우에 404 not found 에러가 뜨게 된다. 이를 위해서 router 설정시에 * path에 대해서 notFound 페이지 처리를 해주어야 한다.

 

const router = new Router({
    // mode: 'history',
    routes : [
    
       ...
       
        /* [404] */
        { path: '/*'          , component: pageNotFoundPage },
    ]
});