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渡されたオブジェクトを取得してレンダリングします