소개

VueCLI로 만든 앱을 실행할 때 vue-router로 설정된,


　　　　　　　👆 이 해시(#) 그만두고 싶다

환경 정보:
※ VueCLI로 생성하고 그대로

Node v6.11.3

WebPack v3.6.0

Vue,js v2.5.2

vue-router v3.0.1

절차

1. vue-router를 history 모드로 설정

vue-router는 초기 설정에서 URL 시뮬레이션 (표기)을 'hash' 모드로 설정하여 SPA를 실현합니다.
이것을 'history'로 하면 해시 불필요, history API을 이용한 방법으로 URL 시뮬레이션을 실현할 수 있다.
모드의 변환은/src/router/index.js 에 기재된, vue-router 의 인스턴스 선언의 옵션에 일행 추기할 뿐. 간단.

/src/router/index.js

 const router = new Router({
 + mode: 'history', // enable history mode
   routes: [
    ...

2. history 모드에 의한 부작용에 대처하기

history 모드를 사용하면 로컬에서 실행중인 webpack-dev-server에 Routing이 설정되어 있지 않으므로 주소 표시 줄에서 해시가없는 URL (ex : http://localhost:8080/home)에 직접 액세스 할 때 404 오류가 발생합니다. .
이를 위해 connect-history-api-fallback Middleware을 설치하고 해결하십시오.

2-1. 설치

 npm install connect-history-api-fallback --save

2-2. 실행 명령 업데이트

npm-scripts의 dev 명령에 --history-api-fallback 추가

package.json

 {
   ...
   "scripts": {
    "dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js",
     ...

이상으로, npm run dev 하면 OK.

참고:
HTML5 History 모드 - vue-router 공식 문서
CLI: History API Fallback Option - GitHub
vue-router의 라우팅 URL에서 해시를 제거하면서 URL 직접 지정에서도 표시(Node, Express) - Qiita