[編集と共有] vue-router 関連のインタビュー質問 (回答分析付き)

この記事では、vue-router 関連の面接の質問 (回答分析付き) を要約して共有し、基本的な知識を整理し、vue-router の知識の蓄えを強化するのに役立ちます。見て！

#vue-router の原理

シングルページ アプリケーションでは、異なるコンポーネント間の切り替えはフロント経由で実装する必要があります。 -エンドルーティング。

フロントエンド ルーティング

1.key はパス、value はページのコンテンツを表示するために使用されるコンポーネントです

2. 作業プロセス:ブラウザのパスが変更されると、対応するコンポーネントが表示されます。

vue-router のルーティング関数: コンポーネントをルートにマップし、レンダリングします

主に

• ページを更新せずに URL を変更する方法

• URL の変更を検出する方法 [関連する推奨事項:

  vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

ルートのハッシュ パターン

• ハッシュは、 URL ## の

  ## とそれに続く部分では、# 以降の URL はサーバーに送信されません。したがって、URL のハッシュ部分を変更してもページは送信されません。リフレッシュ

  ウィンドウは、
onhashchange
• イベントの変更を監視できます。ハッシュが変更された場合は、

  # 以降のコンテンツを読み取り、その情報に基づいてルーティング ルールを照合し、window.location.hash を変更してページ ルーティングを変更します。

URL を変更する 3 つの方法

ブラウザで URL を前後に変更する

タグを使用した URL
• window.location を使用して URL を変更します
• 利点

フロントエンドのみで構成する必要があります。ルーティング テーブル、バックエンドの参加は必要ありません

優れた互換性、すべてのブラウザでサポート可能
• ##ハッシュ値の変更はバックエンドにリクエストを送信せず、完全にフロントです-end routing

• ##欠点

ハッシュ値の前に # を付ける必要がありますが、これは URL 仕様に準拠しておらず、美しくありません

• ルーティング履歴モード - の履歴インターフェイスで新しい

pushState()

と replaceState()## を使用します。 H5 の履歴 API

#html5 # 閲覧履歴のレコードを追加および変更し、URL ジャンプがリロードされないようにページ パスを変更するために使用されるメソッドページ＃＃＃。

• popstate イベントは hashchange イベントに似ていますが、popstate イベントは若干異なります。

  # を作成する場合のみ## ブラウザの PopState は、動作
がトリガーされた場合にのみ呼び出されます。これは、ユーザーがブラウザーの「戻る」ボタンと「進む」ボタンをクリックしたとき、または JavaScript を使用して History.back()、History.forward()、および History.go() メソッド。

• 利点
  

  URL アドレス仕様に準拠し、# が不要で、より美しく使用できます

欠点

• ユーザー

  がアドレスを手動で入力するか、ページを更新すると、URL リクエスト
が送信されます。開始され、バックエンドは、index.html ページを設定する必要があります。ユーザーは静的リソースと一致できません。そうでない場合、404 エラーが発生します。

互換性は比較的低く、新しい pushState() と

replaceState( は HTML5 History オブジェクトで使用されます。)

メソッドには、特定のブラウザのサポートが必要です。 $route と $router の違いは何ですか?
• $router は VueRouter のインスタンス オブジェクトで、アプリケーション全体の唯一のルーター オブジェクトを表します。ルーティングジャンプメソッド、フック関数などが含まれます。
$route は、このコンポーネントのルーティング ルールを表す現在のルーティング オブジェクトです。各ルートには、ローカル オブジェクトであるルート オブジェクトがあります。
• Vue-router パラメータはいくつかの方法で渡されますが、違いは何ですか?

-

説明

ジャンプ ルートの指定方法

パラメータが渡されない場合必要な値なしでパラメータを渡すことができます

params パラメータルートを指定するには名前を使用する必要がありますparamsはルートの一部です。プレースホルダが設定されている場合、配信パスに含まれていないプレースホルダーはアドレス バーに表示されず、更新時に失われますPath? key1=val1 & key2=val2....

	パス/パラメータ パラメータ			このルートに params パラメータがあり、このパラメータがジャンプ中に渡されない場合、ジャンプは失敗するか、ページにコンテンツがありません。
	クエリ パラメーター		1. name を使用してルートを指定できます 2. path を使用してルートを指定できますルートを指定します	query URLの後に続くパラメータです 利用できなくても問題ありません queryは行いません
Vue-router パラメータ損失の問題 params パラメータが渡されると、設定プレースホルダで受け取ったパラメータが渡され、アドレス バーが表示されなくなります。と表示され、リフレッシュが失われます。 解決策: this.$route.params vue-router にはパラメータを取得してローカルに保存できます。フック機能?それは正確に何であり、実行プロセスは何ですか? vue-router 提供されているナビゲーション ガードは、主にジャンプやキャンセルによってナビゲーションをガードするために使用されます。 グローバル ルーティング ガード: 作成順序に基づいて複数の呼び出しが存在する可能性があります。 router.beforeEach() グローバル フロント ガード、 は、 に移動するたびにトリガーされます。 router.afterEach() 各ルート ジャンプが完了した後のグローバル ポスト ルート ガード。 Next 関数は受け入れられません、ジャンプは完了し、コンポーネントに入りました router.beforResolve() グローバル解析ガード、ルーティング ジャンプの前に、すべて コンポーネント内ガード および 非同期ルーティング コンポーネント は、解析後にトリガーされ、ナビゲートするたびにトリガーされます。解析が完了すると、ナビゲーションが決定され、ジャンプできるようになります。 コンポーネント内のルート ガード beforeRouteEnter() は、ルートがコンポーネントに入る前に呼び出されます。このフックは、beforeEach# の間にあります。 ## と beforeEnter After。 まだコンポーネントを入力しておらず、コンポーネントのインスタンスもまだ作成されていません。したがって、コンポーネント インスタンスを取得できません。現時点では、これは未定義であり、 beforeCreate ライフ サイクルの前にトリガーされます。 beforeRouteUpdate() これはすでに利用可能であるため、next にコールバックを渡す必要はありません。動的パラメータを持つパス /foo/:id の場合、/foo/1 と /foo/2 の間をジャンプするとき、統合された Foo コンポーネントがレンダリングされるため、このコンポーネント インスタンスが再利用され、この場合にこのフックを呼び出すことができます。 beforeRouteLeave() コンポーネントを離れるときに呼び出されます。これはすでに使用可能であるため、したがって next にコールバックを渡す必要はありません。 排他的ルーティング ガード beforeEnter() ルーティング設定、this で beforeEnter ガードを定義する必要があります。ガードは、ルートに入るときに のみトリガーされ、beforeEach の直後に実行され、パラメーター、クエリ、またはハッシュが変更された場合にはトリガーされません。 コンポーネントに入る前の呼び出しの順序 beforeEach()=>beforeEnter()=>beforeRouteEnter()=>beforeResolve() これは、コンポーネント インスタンスがまだ作成されていないため、このプロセスでは使用できません。そのため、次の関数を使用する必要があります。 ナビゲーション解析プロセスを完了します。 1. ナビゲーションがトリガーされます。 2. 非アクティブ化されたコンポーネントで beforeRouteLeave ガードを呼び出します。 3. グローバル beforeEach ガードを呼び出します。 4. 再利用されたコンポーネントで beforeRouteUpdate ガードを呼び出します。 5. ルーティング設定で beforeEnter を呼び出します。 6. 非同期ルーティング コンポーネントを解析します。 7. アクティブ化されたコンポーネントで beforeRouteEnter を呼び出します。 8. グローバル beforeResolve ガードを呼び出します。 9. ナビゲーションが確認されました。 10. グローバルの afterEach フックを呼び出します。 11. DOM 更新をトリガーします。 12. beforeRouteEnter を呼び出し、ガード内の次のコールバック関数に を渡します。作成されたコンポーネント インスタンスは、コールバック関数のパラメーターとして に渡されます。 keep-alivekeep-alive はコンポーネントのキャッシュを実装できます。コンポーネントを切り替えても、現在のコンポーネントはアンインストールされません。 keep-alive タグには主に、include、exclude、maxの 3 つの属性があります。 include 、 exclude 最初の 2 つの属性では、keep-alive 条件付きキャッシュが可能です max キャッシュされるコンポーネントの最大数を定義できます。この数を超えると、次の属性の前にキャッシュされます。新しいインスタンスが作成されると、キャッシュ コンポーネント内の最も長い間アクセスされていないインスタンスは破棄されます。 2 つのライフ サイクル アクティブ化/非アクティブ化 。現在のコンポーネントがアクティブかどうかを知るために使用されます。 #キープアライブ原則のキャッシュ管理の特別なマウント/アンマウント プロセス 特別なアンインストール/マウント プロセス:アクティブ化/非アクティブ化 キャッシュ管理: LRU (最も最近使用されていない) は削除アルゴリズムです 特殊なアンインストール/マウント プロセス コンポーネントは実際にアンインストールされることはあり得ません。 keep-alive は、コンポーネントを元のコンテナから別の偽のコンテナに移動して、偽のアンインストールを実現します。マウントすると、非表示のコンテナから元のコンテナに移動されます。コンポーネントの activated および deactivated ライフ サイクル に対応して、keepAlive は内部コンポーネント (キャッシュする必要がある) をマークします 内部コンポーネントの vnode オブジェクトに shouldKeepAlive 属性を追加して、コンポーネントがアンロードされるときにコンポーネントを実際にアンインストールするのではなくキャッシュする必要があることをレンダラーに伝えます keepAlive を追加します内部コンポーネント属性の vnode オブジェクトに、コンポーネントがキャッシュされている場合、レンダラーが再マウントされず、直接アクティブ化できることを示すマークを追加します。 #キャッシュ戦略: 最近少なくとも マップ オブジェクト キャッシュを使用してコンポーネントをキャッシュします。は vnode.type 値であり、コンポーネント インスタンス (vnode.component) への参照があるため、値は vnode オブジェクト です。コンポーネントの vnode オブジェクト内 cache 前者はキャッシュ コンポーネントの仮想 dom コレクションを格納するために使用されます keys 後者はキャッシュ コンポーネントのキー コレクションの保存に使用されます コンポーネント ID とタグに基づいてキャッシュ キーを生成し、コンポーネント インスタンスがキャッシュ オブジェクトにキャッシュされているかどうかを確認します。存在する場合は、キャッシュされた値を直接取得し、 キー 内のキーの位置を更新します (キーの位置の更新は、LRU 置換戦略を実装するための鍵です)。 存在しない場合は、マップ オブジェクトにコンポーネント インスタンスを格納し、キー値を保存し、キャッシュされたインスタンスの数が最大設定値を超えているかどうかを確認します。最大設定値の場合は、LRU 置換ポリシーに従って最新のものを削除し、最も長く未使用のインスタンス (つまり、インデックス 0 のキー) を削除します。 (学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上が[編集と共有] vue-router 関連のインタビュー質問 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。