vueで\ routerと\ routeを説明する

vueで\ routerと\ routeを説明する




ここに画像の説明を挿入

this。$ router.push( '/ path /')は、ジャンプルーティング
プッシュの属性の1つにすぎないため、ここでは1つずつ紹介しません。

この。$ルートは、私たちが渡されたパラメータを取得することができますし、動的経路IDは、
paramsは
クエリーを



最初に、2つの関係を次のように理解できます。

ルーターは現在構成しているすべてのルートであり、ルートはアクティブなルートの1つです。

this。$ router

  • 構成プロセス中、すべてのルートはルーターオブジェクトに保存されます
  • を渡すthis.$router.push('/路径/')ことで、ルートをジャンプさせ、このルートを履歴スタックに追加できます。
  • ここでのルーターオブジェクトは、基本的にVueRouterインスタンスです。

ここに画像の説明を挿入



this。$ route

一般的な理解は、どのルートが現在アクティブであり、どのルートが取り出されるかです。

パラメータを渡す方法

ルートジャンプを行うときは、いくつかのパラメーターを渡したい場合があります。Vueの担当者も2つの方法を提供します。

  • パラメータ
  • クエリ


パラメータ

まず、コンセプトについて明確にする必要があります。その本質は何ですか。ここでは、ダイナミックルーティングというコンセプトを紹介します。

通常、コンポーネントのルートを作成しますが、ユーザーインターフェイスを扱う場合、ルートが不確実であることが多いため、次のパスのように、ルートのルーティングを動的に変更できることを期待しています。多数のユーザーID遅れている

/user/mary

/user/kris

vueの<router-link </ router-linkの代わりに、それを実装しましょう

私たちはルーターファイルの下にいますindex.js最初に構成する

ここに画像の説明を挿入
ここに画像の説明を挿入

構成後、行く必要がありますAPP.viewパラメータを渡すメソッドを記述します

文字列をつなぎ合わせる方法で、ユーザーボタンをクリックし、btnUserメソッドを実行して、ユーザーインターフェイスにジャンプします。

ここに画像の説明を挿入

ただし、現時点ではユーザーインターフェースを構成していないので、レンダリングしてみましょう。

ここに画像の説明を挿入

ここthis.$route使用されます。ユーザーインターフェイスルートは現在(使用中の)最もアクティブなルートです。userIdパラメーターを取得できます。

ここに画像の説明を挿入



クエリ

ルーティング構成フォーマット:通常の構成

router / index.js

ここに画像の説明を挿入
ここに画像の説明を挿入

アプリを見るjsメソッドで書く

ここに画像の説明を挿入

Profile.vue渡されたオブジェクトを取得してレンダリングします

ここに画像の説明を挿入

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_46242909/article/details/113059077