Vue の this.$router と this.$route の違いと push() メソッド

公式文書には次のように記されている。

ルーターを挿入することで、どのコンポーネントでも this.$router を通じてルーターにアクセスでき、また this.$route を通じて現在のルートにアクセスすることもできます。

それは次のように理解できます。

this.$router は、多くのプロパティとオブジェクト (履歴オブジェクトなど) を含むグローバルルーターオブジェクトと同等です。どのページでも、push()、replace()、go() などのメソッドを呼び出すことができます。

this.$route は現在のルートオブジェクトを表します。各ルートにはルートオブジェクトがあり、これは対応する名前、パス、パラメータ、クエリ、その他の属性を取得できるローカルオブジェクトです。

push() メソッドについて:

別の URL に移動するには、router.push メソッドを使用します。このメソッドは履歴スタックに新しいレコードを追加するため、ユーザーがブラウザの戻るボタンをクリックすると、前の URL に戻ります。

<router-link> をクリックすると、このメソッドが内部的に呼び出されるため、<router-link :to="..."> をクリックすると router.push(...) を呼び出すのと同じになります。

push() メソッド呼び出し:

    // 文字列 this.$router.push('home')
 
    //オブジェクト this.$router.push({path:'home'})
 
    //名前付きルート this.$router.push({name:'user', params:{userId: '123'}})
 
    //クエリパラメータを使用すると、/register?plan=private になります。
    this.$router.push({path:'register', query:{plan:private}})

注: パスが指定されている場合、パラメータは無視されますが、上記の例のクエリの場合はそうではありません。代わりに、ルート名を指定するか、次の例に示すようにパラメータ付きの完全パスを記述する必要があります。

    定数ユーザーID = '123';
 
    this.$router.push({path:`/user/${userId}`}); //->/user/123
 
    this.$router.push({name:'user', params:{userId}}); //->/user/123
 
    //ここでのパラメータは無効です this.$router.push({path:'/user', params:{userId}}); //->/user

同じルールが router-link コンポーネントの to プロパティにも適用されます。

要約:

params はパラメータを渡すために使用されます。push では、params はルートを導入するために name のみを使用できるため、path:'/xxx' ではなく name:'xxx' のみを使用できます。ここで path が記述されている場合、パラメータを受け取るページは未定義になります。

ルーティングパラメータの受け渡し方法:

1. 完全なパスを手書きします。

    this.$router.push({path: `/user/${userId}`});

パラメータを取得: this.$route.params.userId

2. パラメータを渡します:

    this.$router.push({name:'user', params:{userId: '123'}});

パラメータを取得: this.$route.params.userId

URL 形式: パラメータなしの URL、http:localhost:8080/#/user

3. クエリを使用して以下を渡します。

    this.$router.push({path:'/user', query:{userId: '123'}});

パラメータを取得: this.$route.query.userId

URL 形式: パラメータ付き URL、http:localhost:8080/#/user?userId=123

簡単に言うと、query は get リクエストに相当し、ページがジャンプしたときにアドレスバーにリクエストパラメータが表示されます。params は post リクエストに相当し、パラメータはアドレスバーに表示されません。

/ で始まるネストされたパスはルートパスとして扱われることに注意してください。これにより、ネストされたパスを設定しなくても、ネストされたコンポーネントを活用できるようになります。

要約する

これで、Vue の this.$router と this.$route の違いと push() メソッドについての説明は終了です。Vue の this.$router と this.$route の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: