Vueプロジェクトの履歴モード

今回は、Vue プロジェクトの履歴モードについて説明します。Vue プロジェクトの履歴モードを操作する際の 注意事項 について、実際のケースを見てみましょう。

しかし、# の外観が非常に醜いことを見つけるのは難しくありません。そして、それが何を意味するのかわかりません。

それで、Stack

Overflow で検索してみたところ、案の定、Stack Overflow は本当に強力なようです。プロジェクトで遭遇する問題は実際に質問され、解決されているようです

。 これは最も投票数が多かった回答で、vue2 でモードを履歴に設定するというもので、試してみると本当にうまくいきました。

しかし、これで問題が解決することはわかっていますが、接続が機能しない理由はわかりませんでした。

したがって、この記事はドキュメントの理解にまで及びます。ドキュメントに直接アクセスできます。

vue によって開発された単一ページのアプリケーションの場合、異なるページを切り替えると、常に 1 つの HTML しか存在しないことがわかります。これが、それが単一ページ、または vue-router と呼ばれる本当の理由です。 デフォルトのハッシュ モード - URL のハッシュを使用して完全な URL をシミュレートします。 ページを変更してもリロードされません。通常のページの場合、URLを変更すると必ずページが変更されるためです。 URL のクエリ

文字列 とハッシュ値が変更されるまで、ページはリロードされません。 これがここでの真実です。

しかし、#この形は本当に醜いです！したがって、それが望ましくない場合は、ルーティング履歴モードを使用できます。 ！ ！ このモードでは、history.pushState API を最大限に活用して、ページをリロードせずに URL ジャンプを完了します。

りー

このモードを使用すると、# は表示されなくなりますが、通常の URL と同じようにアクセスできます。

ただし、このモードで適切にプレイするには、バックグラウンド構成のサポートが必要です。私たちのアプリケーションはシングルページのクライアントアプリケーションであるため、バックグラウンドが正しく設定されていない場合、ユーザーがブラウザで http://oursite.com/user/id に直接アクセスすると、404 が返され、見た目が良くありません。 。

したがって、すべての状況をカバーする候補リソースをサーバー側に追加する必要があります。URL がどの

static リソースにも一致しない場合は、アプリが依存するページである同じindex.html ページを返す必要があります。

注: 現在作業しているプロジェクトのバックエンドはこのメソッドをサポートしていないため、最初は開発に # メソッドを使用します。

警告

これを実行すると、すべてのパスに対して Index.html ファイルが返されるため、サーバーは 404 エラー ページを返さなくなります。これを回避するには、Vue アプリケーション内のすべてのルーティング状況をカバーしてから、404 ページを表示する必要があります。

りー

または、

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

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