vue 프로젝트 의\#-History 모드 를 어떻게 제거 하 는 지 상세 하 게 설명 합 니 다.

2448 단어 vuehistory 모드
vue-cli 로 구 축 된 환경 을 사용 하여 루트 를 설정 한 후 아래 의 상황 을 볼 수 있 습 니 다.
  
하지만 발견 하기 어렵 지 않 습 니 다.
그래서 Stack Overflow 에서 검색 해 봤 는데 역시~  보아하니 Stack Overflow 는 정말 강 한 것 같 습 니 다.프로젝트 에서 겪 은 문 제 는 실제로 so 에서 이미 물 어보 고 해결 되 었 습 니 다.이것 은 다음 과 같 지 않 습 니 다.    

이것 은 가장 높 은 표 의 대답 입 니 다.즉,vue 2 에서 mode 모드 를 history 로 설정 하고 테스트 한 후에 확실히 효과 가 있 습 니 다!
그러나 이렇게 하면 문 제 를 해결 할 수 있다 는 것 을 알 면서 도 왜 그런 지 모 르 겠 습 니 다.연결 하면 서 우 리 는 보 았 습 니 다문서..
그래서 이 글 은 바로 문서 의 이 해 를 설명 하 는 것 이 므 로 여러분 은 직접 문 서 를 보 러 갈 수 있 습 니 다. 
vue 가 개발 한 단일 페이지 응용 프로그램 에 대해 우 리 는 서로 다른 페이지 를 전환 할 때 html 가 영원히 하나 밖 에 없다 는 것 을 발견 할 수 있다.이것 은 정말 단일 페이지 라 고 불 리 는 이유 이다.vue-router 기본 hash 모드 인 URL 의 hash 를 사용 하여 완전한 URL 을 모 의 하기 때문에 URL 이 바 뀌 었 을 때 페이지 는 다시 불 러 오지 않 는 다.정상 적 인 페이지 에 서 는 url 을 바 꾸 면 페이지 가 바 뀔 수 있 으 며,url 의 검색 문자열 과 hash 를 바 꿀 때 만 페이지 를 다시 불 러 오지 않 기 때 문 입 니 다.여기 가 바로 이 이치 다.
그런데 이런 형식 은 정말 못 생 겼 어 요!  그래서 원 하지 않 으 면 경로 의 history 모드 를 사용 할 수 있 습 니 다!!이 모드 는 페이지 를 다시 불 러 올 필요 가 없 이 history.pushstate API 를 충분히 이용 하여 URL 의 이동 을 완성 합 니 다.

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})
이 모드 를 사용 하면\#가 아니 라 정상 적 인 url 로 접근 할 수 있 습 니 다.  
그러나 이런 모드 를 잘 하려 면 배경 설정 지원 이 필요 하 다.Google 의 응용 프로그램 은 단일 페이지 클 라 이언 트 응용 프로그램 이기 때문에 배경 에 정확 한 설정 이 없 으 면 사용자 가 브 라 우 저 에서 직접 방문 할 때http://oursite.com/user/id 404 로 돌아 갈 거 야.이 건 안 예 뻐.
따라서 서버 에 모든 상황 을 덮어 쓰 는 후보 자원 을 추가 해 야 합 니 다.URL 이 정적 자원 과 일치 하지 않 으 면 같은 index.html 페이지 로 돌아 가 야 합 니 다.이 페이지 는 app 이 의존 하 는 페이지 입 니 다.
주의:현재 제 가 하고 있 는 프로젝트 의 백 엔 드 는 이런 방식 을 지원 하지 않 기 때문에 먼저\#방식 으로 개발 하 는 것 이 좋 습 니 다.
경고 하 다.
이렇게 한 후에 서버 는 404 오류 페이지 를 되 돌려 주지 않 습 니 다.모든 경로 에 대해 index.html 파일 을 되 돌려 주기 때 문 입 니 다.이러한 상황 을 피하 기 위해 서 는 Vue 응용 프로그램 에서 모든 경로 상황 을 덮어 쓰 고 404 페이지 를 제시 해 야 합 니 다.

const router = new VueRouter({
 mode: 'history',
 routes: [
 { path: '*', component: NotFoundComponent }
 ]
})
또는 Node.js 를 배경 으로 한다 면 서버 의 경로 가 URL 과 일치 하 는 지,경로 가 일치 하지 않 을 때 404 로 돌아 가 fallback 을 실현 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기