HTML5 기록 모드란 무엇입니까?

vue-router 기본 해시 모드 - URL의 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 변경되면 페이지가 다시 로드되지 않습니다.

보기 흉한 해시를 원하지 않는 경우에는 History.pushState API를 최대한 활용하여 페이지를 다시 로드하지 않고도 URL 점프를 완료하는 라우팅 기록 모드를 사용할 수 있습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

기록 모드를 사용하면 URL이 http://yoursite.com/user/id와 같은 일반 URL처럼 보이는데 보기에도 좋습니다!

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

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

백엔드 구성 예

<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)

https://github.com/bripkens/connect-history-api-fallback
경고
이 작업을 수행한 후에는 모든 경로에 대해 index.html 파일이 반환되므로 서버는 더 이상 404 오류 페이지를 반환하지 않습니다. 이를 방지하려면 Vue 애플리케이션의 모든 라우팅 상황을 다룬 다음 404 페이지를 제시해야 합니다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

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

위 내용은 HTML5 기록 모드란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!