HTML5 履歴モードとは

一个新手
リリース: 2017-09-23 09:19:12
オリジナル
3877 人が閲覧しました

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: &#39;history&#39;,
  routes: [
    { path: &#39;*&#39;, component: NotFoundComponent }
  ]
})
ログイン後にコピー

または、Node.js をバックエンドとして使用している場合は、サーバー側のルーティングを使用して URL を照合し、ルートが一致しない場合に 404 を返すことで、フォールバックを実装できます。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!