[Vue.js] URL뒤에 붙는 # | Eric's DevLog (데브로그)

author

postNo

status

thumbnail

description

src/router/index.js

위 파일을 열어보면 아래 소스를 확인할 수 있다. (구조에 따라 다를 수 있음)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
export default router

Vue.js는 mode설정을 하지않으면 기본적으로 hash모드로 동작한다.

(이 경우 'http://example.com/#/' 과 같이 URL 뒤에 #이 붙는다.)

이 mode를 history로 바꿔주면 URL뒤에 #이 사라진 모습을 볼 수 있다.

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
export default router

`mode` hash vs history ?

hash

모든 url을 hash형태로 서비스한다. URL이 변경될 때 페이지가 다시 로드 되지 않는다.

history

페이지를 다시 로드하지 않고 URL을 탐색할 수 있다.

SPA의 단일 페이지 클라이언트앱이기 때문에 사용자가 직접 http://example.com/user/id 에 접속하면 404오류가 발생한다.

history모드에서 404오류 해결방법

URL접속 시 동일한 index.html 페이지를 제공해야 한다. nginx 설정으로 변경 가능.

location / {
  try_files $uri $uri/ /index.html;
}

References

https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C

src/router/index.js

mode hash vs history ?

history모드에서 404오류 해결방법

`mode` hash vs history ?