vue.router の用途は何ですか?

vue.router は、シングルページ アプリケーションの構築を簡単にする公式ルーティング プラグインです。 Vue のシングル ページ アプリケーションは、ルーティングとコンポーネントに基づいています。ルーティングは、アクセス パスを設定し、パスとコンポーネントをマップするために使用されます。vue-router シングルページ アプリケーションでは、パス間の切り替えを使用して、ページの切り替えとジャンプを実現できます。

[関連記事の推奨: vue.js]

vue.router の機能は次のとおりです。

vue-router は Vue.js の公式ルーティング プラグインで、vue.js と深く統合されており、シングルページ アプリケーションの構築に適しています。 Vue のシングルページ アプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセス パスの設定、パスとコンポーネントのマップに使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実現します。 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 ページをリロードせずに URL ジャンプを完了する API。

vue-router

は Vue.js の公式ルーティング プラグインです。vue.js と深く統合されており、単一ページ アプリケーションの構築に適しているため、簡単に構築できますシングルページのアプリケーション。含まれる機能は次のとおりです。

#ネストされたルーティング/ビュー テーブル

• モジュール式のコンポーネントベースのルーティング構成

• ルーティング パラメーター、クエリ、ワイルドカード

• Vue.js トランジション システムに基づいたトランジション効果の表示

• きめ細かいナビゲーション コントロール

• 自動的にアクティブ化された CSS クラスを含むリンク

• HTML5 履歴モードまたはハッシュ モード、IE9 では自動的に機能低下

• カスタマイズされたスクロール バーの動作

• Vue のシングル ページ アプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセス パスの設定と、コンポーネントを含むパス マップの転送に使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実現します。 vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えを行っています。ルーティング モジュールの本質は、URL とページ間のマッピング関係を確立することです。

関連する学習の推奨事項:

JavaScript 学習チュートリアル

以上がvue.router の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。