Vue フロントエンドルーティングにおけるハッシュとヒストリの違いの簡単な分析

Vueフロントエンド ルーティング ハッシュと履歴の違いは何ですか?この記事では、フロントエンドルーティングハッシュとヒストリーの違いについて学びます。

これら 2 つのルートを理解する前に、vue であっても react であっても、次の場合に必ず実行されます。どちらのルートを選択する場合も、必然的に hash と history の間で混乱することになるか、単にデフォルトの hash と を使用することもできます。 # 混乱した方法で. ルーティング、この共有を読んだ後は、どのルートを選択すればよいか迷うことはなく、ニーズに応じて選択できることを保証します。ご質問がございましたら、コメント欄でご指摘いただき、一緒にコミュニケーションをとりましょう。

Vue Router の簡単な紹介

• Vue Router は、Vue の公式ルーティング プラグインです。 .js は、Vue.js と深く統合されており、単一ページのアプリケーションの構築に適しています。 vue のシングルページ アプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセス パスを設定し、パスとコンポーネントをマップするために使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実現します。 vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えです。 ルーティング モジュールの本質は、URL とページ の間のマッピング関係を確立することです。 (学習ビデオ共有: vue ビデオ チュートリアル)
• なぜ a タグを使用できないかというと、Vue を使用して行うことはすべて単一ページのアプリケーションであるためです。これは mainindex.html ページが 1 つだけあることと同じなので、作成した タグは機能しません。管理には vue-router を使用する必要があります。

#Vue Router の実装原理

• ルーティング モードを理解する前に、

  vue-roter## を理解する必要があります。 # 実装原理とは何か、シングルページアプリケーションとは何か、その特徴は何か? ルーティングへの理解が深まりやすくなります。

• SPA

  シングル ページとアプリケーション メソッド: シングル ページ アプリケーションには完全なページが 1 つだけあり、初めてページを読み込むときに、 html ページは他のすべてのページ コンポーネントとともにダウンロードされるため、ページを切り替えるときにページ全体が読み込まれるのではなく、指定されたコンテナ内のコンテンツのみが更新されます。

単一ページ アプリケーション (
• SPA

  ) の中核の 1 つは、ページを再リクエストせずにビューを更新することです。

ルーター オブジェクトの基礎となる実装の 3 つの主な手順は、(1)
• アドレス バーの変更を監視する、(2)

  対応するページを見つける、です。 現在のパス コンポーネント; (3) 見つかったページ コンポーネント を router-view の場所への に置き換えます。

vue-router
• シングルページのフロントエンドルーティングを実装する場合、

  Hash モードと History# の 2 つのメソッドが提供されます。 # # Mode; vue2 は mode パラメータに基づいてどのメソッドを使用するかを決定しますが、vue3 は history パラメータを使用します。以下では、この属性について詳しく説明します。

  ハッシュ

##簡単な説明

##vue-router

デフォルトのハッシュ モード - URL ハッシュを使用して完全な URL をシミュレートするため、URL が変更されてもページはリロードされません。

hash (#) は

URL

のアンカーポイントで、Web ページ内の位置を表します。

• # 以降の部分のみを変更すると、ブラウザは対応する位置までスクロールするだけで、Web ページはリロードされません。つまり、# はブラウザのアクションをガイドするために使用され、サーバーにとってはまったく役に立ちません。 ##以降を変更するとブラウザのアクセス履歴に記録が追加されます。「戻る」ボタンで前に戻ります。位置、sohash このモードはアンカー ポイントの値を変更し、さまざまな値に従って指定された DOM 位置にさまざまなデータをレンダリングします。 # シンボル自体とそれに続く文字は hash と呼ばれ、 window.location.hash を通じてアクセスできます。 プロパティの読み取り。

機能

• ハッシュ URLには表示されますが、HTTP#には含まれません。 # # リクエスト中です。これはブラウザーのアクションをガイドするために使用され、サーバー側ではまったく役に立ちません。したがって、hash を変更してもページはリロードされません
• hash を変更するためのリスナーを追加できます。 イベント:

   window.addEventListener("hashchange", fncEvent, false)

ハッシュ (

window.location.hash) が変更されるたびに、ブラウザのアクセス履歴にレコードが追加されます

URL には

# 番号が含まれています。

#設定

vue3 設定

ハッシュ
• パターン ルーティング

  

歴史

##簡単な説明

#歴史です別のルーティング モード。ハッシュ モードには URL に # が含まれるため、# を使用したくない場合は、ルーティングの

history

モードを使用でき、
• router# を追加するだけで済みます。 # 応答内 # ルールを設定するときは、それを追加するだけです。vue のルーティングのデフォルトは hash モードです。 HTML5 履歴インターフェイスの新しい pushState() メソッドと replaceState()
メソッドを使用します。
• これら 2 つのメソッドはブラウザの履歴スタックに適用され、現在の back、forward、go に基づいて履歴レコードを変更する機能を提供します。ただ、変更を実行すると、現在の URL が変更されていても、ブラウザーはすぐにバックエンドにリクエストを送信しません。 #設定

機能

ルートジャンプ なしページをリロードする必要があります。

# がないと、ほとんどの人はハッシュ ルーティングよりもはるかに優れていると考えます。

互換性はハッシュほど良くありません。これについては後述します。

• 運用環境の問題と解決策
• 場合プロジェクトがサーバーにデプロイされた後、ブラウザに URL を入力します (例:

www.test.com

)。このとき、DNS 解決が行われ、取得後にIP アドレス、IP アドレスに基づいてサーバーに送信します。リクエストを開始し、サーバーがリクエストを受信すると、対応する結果 (html、css、js) を返します。フロントエンドにリダイレクトを設定すると、ページは www.test.com/home にジャンプし、フロントエンドは対応するコンポーネントと一致してページ上にレンダリングします。この時点でページを更新すると、ブラウザーは新しいリクエスト

www.test.com/home

を送信します。バックエンド サーバーに /home に対応するインターフェイスがない場合は、404 が返されます。
• 運用環境リフレッシュ 404 の解決策は、nginx でのプロキシ転送によって実行でき、パラメータ内のリソースが有効かどうかを確認するように nginx で設定できます。何も見つからなかった場合、nginx は内部的にプロジェクトのホームページにリダイレクトされます。

  

• 開発環境 - HistoryApiFallback

  

友人の中には、なぜ開発環境を使用するのかについて疑問を持つ人もいるかもしれません。この問題は発生していませんが、運用環境と同じ更新操作ではないでしょうか?

• こちらでも質問があり、関連情報を確認したところ、

  vue-cli## の

  webpack# が見つかりました。 対処に役立ちました

• #この設定を false に変更すると、ブラウザはリクエストを get リクエストとみなします。バックエンドに対応するインターフェイスがない場合、次のエラー メッセージが表示されます。

  

• 概要

  

  以上です

  vue-roter
の 2 つのルーティング モードと差別化を使用します。簡単に言うと、

hash

はルーティングの互換性には優れていますが、#、 History## があると見苦しくなります。 # は通常の URL パスと同じですが、サーバー上で個別に設定する必要があります。誰もが自分の好みに応じて必要に応じて使用できます。質問がある学生は、コメント欄で質問してください。

(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)

以上がVue フロントエンドルーティングにおけるハッシュとヒストリの違いの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。