vue multipage 개발 시 사용자 분기처리, vue url 설정

vue-router 기본은 해시모드이다. 그래서 url에 꼭 #이 끼게 된다.

 

※ 이슈 ※

문제는 사용자, 관리자 페이지를 나누면서 사용자는 "/", 관리자는 "/console" 로 나뉘게 되는데

http://localhost:8081/console 을 치면 http://localhost:8081/console# 로 접속되면서 해시값 # 뒤부터 경로로 읽어들여 실제 접속페이지는 "/" 이쪽으로 들어가게 된다.

내가 원하는 것은 http://localhost:8081/console 을 쳤을 때 관리자 화면에 접속이 되는 것이다.

 

이걸 검색을 뭐라고 해야할까 싶어 찾다가 우선 시간이 좀 있어서 포기했었는데

다른 이슈에 대해 검색을 하다가 찾게 되었다.

 

※ 해결방법 ※

VUE router의 default인 hash mode를 history mode로 변경

new Router의 옵션 중 mode를 history로 변경하면 된다. 적용하고 나니 url에 해시 표시 없이 사용자, 관리자 context path에 따라 잘 나타나고 접속하고 싶은 페이지로 잘 접속된다.

 

소스코드 (src/router.js)

export default new Router({
  mode: "history",
  routes: [
  ...
  ]
  });

 

 

 

* 참조

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

HTML5 히스토리 모드 | Vue Router

k39335.tistory.com/67