VueJS에서 url 주소 뒤에 붙는 # 기호를 삭제하는 방법입니다.

SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?



# VueJS 해쉬뱅 # 기호 url 제거하기
아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.
export default new Router({
  mode: 'history',
  routes: [ ... ]
  ...
});

이제 라우트 값이 바뀔때마다 주소가 기존과 다르가 변경될 것입니다.

변경 전 url ) https://webisfree.com/#/main
변경 후 url ) https://webisfree.com/main

hashbang을 사용한다고 특별한 단점은 없습니다. 다만 주소가 길어지고 사용자가 입력하여 페이지를 이동하는데 조금 불편할 수 있다는 점입니다.

VueJS HTML5 History Mode page 이동하기 >
https://router.vuejs.org/guide/essentials/history-mode.html

더 자세한 내용은 위 링크에서 확인하실 수 있습니다.