vue 프로젝트 의\#-History 모드 를 어떻게 제거 하 는 지 상세 하 게 설명 합 니 다.
2448 단어 vuehistory 모드
하지만 발견 하기 어렵 지 않 습 니 다.
그래서 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 을 실현 할 수 있 습 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.