IT/VUEJS

vuejs 히스토리 모드

news-wiki 2019. 8. 11. 22:17
728x90

히스토리 모드

 

vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다.

 

해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있습니다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있습니다.

 
const router = new VueRouter({

  mode: 'history',

  routes: [...]

})

히스토리 모드를 사용하면 URL이 "정상"으로 보입니다. http://oursite.com/user/id. 멋집니다!

 

그러나 문제는 다음과 같습니다. 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/user/id 에 접속하면 404 오류가 발생합니다.

 

걱정하지 않아도됩니다. 문제를 해결하려면 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면됩니다. URL이 정적 에셋과 일치하지 않으면 앱이 있는 동일한 index.html페이지를 제공해야 합니다.

728x90