vueルーターとは

vue-router を学ぶには、まずここでのルーティングが何であるかを知る必要があります。以前のように タグを使用してリンクを直接記述できないのはなぜですか? vueルーターの使い方は？一般的なルーティング操作は何ですか?これらの質問を待っていることが、この記事で説明する主な問題です

vue-router とは

ここでのルーティングは次のとおりです。ではありません 通常ハードウェア ルーターと呼ばれるものを指します。ここでのルーティングは SPA (Single Page Application) のパス マネージャーです。より一般的に言うと、vue-router は WebApp のリンク パス管理システムです。
vue-router は Vue.js の公式ルーティング プラグインで、vue.js と深く統合されており、シングルページ アプリケーションの構築に適しています。 Vue のシングルページ アプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセス パスの設定、パスとコンポーネントのマップに使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実現します。 vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えを行っています。ルーティング モジュールの本質は、URL とページ間のマッピング関係を確立することです。
なぜ a タグを使用できないかというと、Vue で行うのは単一ページのアプリケーションであり、メインのindex.html ページが 1 つだけあるのと同じであるため、 と記述する必要があります。 タグは機能しないため、vue-router を使用して管理する必要があります。

vue-router 実装原則

SPA (シングル ページ アプリケーション): シングル ページ アプリケーションには完全なページが 1 つだけあり、ページをロードするときにロードされません。ページ全体を更新すると、指定したコンテナ内のコンテンツのみが更新されます。シングルページ アプリケーション (SPA) のコアの 1 つは、ページを再リクエストせずにビューを更新することです。vue-router は、シングルページ フロントエンド ルーティングを実装するときに、ハッシュ モードとヒストリー モードという 2 つのメソッドを提供します。

1 、ハッシュ モード:

vue-router デフォルトのハッシュ モード - URL のハッシュを使用して完全な URL をシミュレートするため、URL が変更されてもページはリロードされません。ハッシュ (#) は URL のアンカーポイントであり、Web ページ内の位置を表します。# 以降の部分のみを変更すると、ブラウザは対応する位置までスクロールするだけで、Web ページのリロードは行われません。 , # はブラウジングのガイドに使用されます。サーバーのアクションはサーバーにとってまったく役に立たず、HTTP リクエストには # が含まれなくなります。同時に、# 以降の部分が変更されるたびにレコードが追加されます。ブラウザのアクセス履歴。前の位置に戻るには「戻る」ボタンを使用します。そのため、ハッシュ モードでは、アンカー ポイント値の変更を通じて、異なる値に従って、指定された DOM 位置に異なるデータがレンダリングされます。 2. 履歴モード:

ハッシュ モードなので、URL には # が付きます。醜いハッシュを望まない場合は、ルーティングの履歴モードを使用できます。「mode: 」を追加するだけです。ルーティング ルールを構成するときは、history'" を使用します。このモードでは、history.pushState API を最大限に活用して完了します。ページを再読み込みせずに URL がジャンプします。

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