Vue 경로 히 스토리 모드 모드 에서 페이지 가 렌 더 링 되 지 않 는 이유 및 해결

Vue 아래 경로 History mode 로 인해 페이지 가 렌 더 링 되 지 않 는 이유
Vue.js+vue-router 로 단일 페이지 애플 리 케 이 션 을 만 드 는 것 은 매우 간단 합 니 다.Vue.js 를 사용 하면 그룹 구성 요 소 를 통 해 프로그램 을 구성 할 수 있 습 니 다.vue-router 를 추가 하려 면 구성 요소(components)를 경로(routes)에 표시 한 다음 vue-router 가 어디 에 있 는 지 알려 주 는 것 이 필요 합 니 다.
일반적으로 개 발 된 단일 페이지 애플 리 케 이 션 의 URL 은\#번호 의 hash 모드 를 가지 고 있 습 니 다.전체 애플 리 케 이 션 자체 에 HTML 만 있 고 다른 것 은 router 를 통 해 렌 더 링 되 기 때 문 입 니 다.업무 가 필요 하거나 단순히\#번호 가 아름 답지 않다 고 생각 되면 history 모드 를 사용 할 수 있 습 니 다.쉽게 말 하면 router 설정 파일 index.js 에 다음 줄 의 코드 를 추가 하 는 것 입 니 다.

history: mode

그래,이렇게 URL 은 더 이상\#번호 가 없 을 거 야.주소 표시 줄 전체 가 익숙 한 모습 으로 돌아 간 것 을 발견 할 수 있 을 거 야.하지만 그 다음 에 소개 하 는 것 은 매우 중요 해.아마 입문 한 신인 들 이 많 든 적 든 한두 개의 구 덩이 를 만 날 수 있 을 거 야.
페이지 렌 더 링 불가
여기 서 제 가 쓴 항목 을 예 로 들 면 history 모드 를 열 었 을 때 저 는 경로 에 대해 어떠한 처리 도 하지 않 았 습 니 다.Dev 단계 에서 모든 것 이 정상 적 이지 만 포장 한 후에 프로젝트 경 로 를 방문 합 니 다.
sdp.driver.com/driver/
페이지 가 비어 있 지만 정적 파일 은 정상적으로 인용 할 수 있 습 니 다.YII 의 모듈 을 사 용 했 기 때문에 도 메 인 이름 외 에 driver 모듈 이름 도 있 습 니 다.일반적으로 많은 사람들 이 만 든 프로젝트 는 루트 디 렉 터 리 아래 에 놓 여 있 습 니 다.즉,:
sdp.driver.com
이런 형식 은 문제 가 없다.그러나 모듈 을 설정 하거나 하위 폴 더 아래 에 두 면 문제 가 생 길 수 있 습 니 다.사실 이것 은 router 에서 경로 의 구성 요 소 를 찾 을 수 없 기 때문에 렌 더 링 할 수 없습니다.라 우 터 의 index.js 만 수정 하고 모든 path 에 프로젝트 이름 을 추가 하면 성공 할 수 있 습 니 다.

마지막 페이지 효과:

404 오류
History mode 에서 주소 표시 줄 을 통 해 직접 경 로 를 방문 하면 404 오류 가 발생 합 니 다.이것 은 단일 페이지 응용 프로그램(쓸데없는 말)이기 때 문 입 니 다.사실은 history.pushstate API 를 호출 했 기 때문에 모든 점프 와 같은 동작 은 router 를 통 해 이 루어 집 니 다.이 문 제 를 해결 하 는 것 은 간단 합 니 다.배경 에 URL 이 정적 자원 과 일치 하지 않 으 면 설정 해 야 합 니 다.기본 index.html 로 이동 합 니 다.구체 적 인 설정 은 다음 과 같 습 니 다.
Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
 try_files $uri $uri/ /index.html;
}

Node.js (Express)
링크 를 클릭 할 때마다 페이지 를 새로 고침 해 야 하 는 문제
알다 시 피 단일 페이지 애플 리 케 이 션 을 개발 하 는 것 은 그 부 드 러 운 체험 효과 때 문 입 니 다.클릭 할 때마다 페이지 를 새로 고침 합 니 다.
이 문 제 는 window.location 을 사용 하여 뛰 기 때 문 입 니 다.router 가 제공 하 는 방법 만 사용 하면 이 문 제 를 해결 할 수 있 습 니 다.
main.js 에서 router 를 전역 에 연결 하도록 설정 합 니 다.

Vue.prototype.router = router;

그 다음 에 다음 과 같은 방식 으로 점프 를 제어 합 니 다.

this.router.push('driver/service');

자,이번 Vue 경로 에 대한'구덩이'는 여기까지 소개 되 었 습 니 다.여러분 의 학습 에 도움 이 되 고 많은 응원 부 탁 드 리 겠 습 니 다.