웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 url 주소 뒤에 붙는 # 기호를 삭제하는 방법입니다.
SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?
# VueJS 해쉬뱅 # 기호 url 제거하기
아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.
이제 라우트 값이 바뀔때마다 주소가 기존과 다르가 변경될 것입니다.
변경 전 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
더 자세한 내용은 위 링크에서 확인하실 수 있습니다.
SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?
# VueJS 해쉬뱅 # 기호 url 제거하기
아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다.export default new Router({
mode: 'history',
routes: [ ... ]
...
});
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
더 자세한 내용은 위 링크에서 확인하실 수 있습니다.
아래의 글도 찾고 계시지 않나요?
