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 を返すことで、フォールバックを実装できます。

以上がHTML5 履歴モードとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。