Vue 프로젝트의 히스토리 모드

이번에는 vue 프로젝트의 히스토리 모드를 가져오겠습니다. vue 프로젝트의 히스토리 모드 운영 시 주의사항은 무엇인가요?

그런데 #의 모습이 정말 못생겼다는 걸 발견하기는 어렵지 않은데, 무슨 일을 하는지 모르겠다구요?

그래서 StackOverflow에 검색해 보니 과연~ Stack Overflow가 정말 강력한 것 같아요. 프로젝트에서 겪게 되는 문제들도 실제로 물어보고 해결해 놨거든요,

이것은 vue2에서 모드를 기록으로 설정하는 것입니다. 시도한 후에 정말 작동합니다!

그러나 이것이 문제를 해결할 것이라는 것을 알지만 그 이유를 모르면 연결이 작동하지 않습니다. 우리는 문서를 보았습니다.

따라서 이 글은 문서에 대한 이해까지 확장하여 해당 문서로 바로 이동할 수 있습니다.

vue에서 개발한 단일 페이지 애플리케이션의 경우, 서로 다른 페이지 사이를 전환하면 항상 하나의 HTML만 있다는 것을 알 수 있습니다. 이것이 바로 단일 페이지라고 불리는 이유이며 vue-router입니다. 기본 해시 모드 - URL의 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 페이지가 변경되면 다시 로드되지 않습니다. 일반 페이지의 경우 URL을 변경하면 반드시 페이지가 변경되기 때문입니다. 쿼리 문자열 및 URL의 해시 값이 변경될 때까지 페이지가 다시 로드되지 않습니다. 이것이 진실입니다.

그런데 #이형태는 정말 못생겼다! 그러니 원하지 않으시면 라우팅 히스토리 모드를 이용하시면 됩니다! ! ! 이 모드는 History.pushState API를 최대한 활용하여 페이지를 다시 로드하지 않고도 URL 점프를 완료합니다.

rreee

이 모드를 사용하신 후에는 #이 없으나, 일반 URL처럼 접속하실 수 있습니다.   

하지만 이 모드에서 제대로 플레이하려면 백그라운드 구성 지원이 필요합니다. 우리 애플리케이션은 단일 페이지 클라이언트 애플리케이션이기 때문에 배경이 올바르게 구성되지 않은 경우 사용자가 브라우저에서 http://oursite.com/user/id에 직접 액세스하면 404가 반환되어 보기에 좋지 않습니다. .

따라서 모든 상황을 포괄하는 후보 리소스를 서버 측에 추가해야 합니다. URL이 어떤 정적 리소스와도 일치하지 않으면 앱이 의존하는 페이지인 동일한 index.html 페이지를 반환해야 합니다.

참고: 제가 현재 진행하고 있는 프로젝트의 백엔드에서는 이 방법을 지원하지 않으므로 먼저 개발 시에는 # 방법을 사용하겠습니다.

경고

경고합니다. 이 작업을 수행하면 index.html 파일이 모든 경로에 대해 반환되므로 서버가 더 이상 404 오류 페이지를 반환하지 않습니다. 이를 방지하려면 Vue 애플리케이션의 모든 라우팅 상황을 다룬 다음 404 페이지를 제시해야 합니다.

rreee

또는 Node.js를 백엔드로 사용하는 경우 서버 측 라우팅을 사용하여 URL을 일치시키고 일치하는 경로가 없으면 404를 반환하여 fallback을 구현할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Vue 프로젝트의 히스토리 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!