Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

概要

一般的なシナリオ: リストの詳細をクリックして詳細ページに移動し、渡されたパラメータに基づいて内部ページで詳細データを取得します。

ルートパラメータを渡す方法は一般的にいくつかあります。以下では主にプログラムナビゲーション router.push のパラメータ渡しの方法を紹介します。

方法1: params経由でパラメータを渡す

ルーティング構成は次のとおりです。

{ 
    path: '/detail/:id', // id の後に ? が続く場合、このパラメータはオプションであることを意味します name: 'detail', 
    コンポーネント: 詳細 
}

$router.pushのパスパラメータを使用する

// リスト内のパラメータを渡す goDetail(row) {
    this.$router.push({
        パス: `/detail/${row.id}`
    })
}

// 詳細ページでパラメータ this.$route.params.id を取得します

$router.pushのparamsを通じてパラメータを渡す

// リストページパラメータ goDetail(row) {
    this.$router.push({
        名前: '詳細',
        パラメータ: {
            id: 行.id
        }
    })
}

// 詳細ページで this.$route.params.id を取得します

注: このパラメータ渡し方法では、パスは名前を使用し、パスは名前を使用し、パスは名前を使用します。パスが使用されている場合、パスは取得されません。ルーティング構成に /:id、つまり path: 'detail' が追加されていない場合、ID は URL に表示されません。詳細ページでパラメータ ID を取得することはできますが、更新後にパラメータは失われます。

上記の 2 つの方法では、渡されたパラメータ ID が、図に示すように URL の後に表示されます。

渡されたパラメータは URL で公開されます。

ルートに params パラメータ /:id が設定されているが、ジャンプ時にパラメータが渡されない場合、ページにコンテンツがないか、ジャンプが失敗します。最後に追加できますか?このパラメータがオプションであることを示します (例: /:id?)

方法2: クエリを通じてパラメータを渡す

//ルート設定{ 
    パス: '/detail', 
    名前: '詳細', 
    コンポーネント: 詳細 
}

// リストページ goDetail(row) {
    this.$router.push({
        パス: '/detail',
        クエリ: {
            id: 行.id
        }
    })
}

//詳細ページ this.$route.query.id

注: この方法で渡されたパラメータは、アドレスバーの URL の後に表示されます。id =?、get パラメータの渡し方と同様です。パラメータを渡すには、パスとともにクエリを使用する必要があります。

渡されたパラメータはオブジェクトまたは配列です

また、クエリ経由でオブジェクトや配列を渡すと、アドレスバーで強制的に[object オブジェクト]に変換されてしまい、更新後にオブジェクト値が取得できなくなります。

このとき、JSON.stringify() メソッドを使用して、渡すパラメータを文字列に変換し、JSON.parse() を使用して詳細ページのオブジェクトに変換することができます。

parObj = JSON.stringify(obj) とします。
this.$router.push({
    パス: '/detail',
    クエリ: {
        'obj': パーオブジェクト
    }
})

//詳細ページ JSON.parse(this.$route.query.obj)

この方法はオブジェクトを渡すこともできますが、データが小さい場合は問題ありませんが、データが大きい場合はアドレスバーが非常に長くなります。

注: すべてのサブコンポーネントでは、ルートパラメータは$routerではなく$routeによって取得されます。

上記のパラメータとクエリパラメータの受け渡し方法の比較:

params + $router.push の名前でパラメータを渡します。ルートに params パラメータが設定されていない場合、ルート後にパラメータはスプライスされませんが、ページ更新パラメータは失われます。
$router.push のパスにパラメータを指定したり、クエリを通じてパラメータを渡したりすると、パラメータはアドレスの後に連結され、情報が公開されます。

方法3: propsを使用してコンポーネントルートを分離する

//ルート設定{ 
    パス: '/detail/:id',
    名前: '詳細', 
    コンポーネント: 詳細、
    props: true // props が true に設定されている場合、$route.params はコンポーネントのプロパティとして設定されます}

// リストページ goDetail(row) {
    this.$router.push({
        パス: '/detail',
        クエリ: {
            id: 行.id
        }
    })
}

//詳細ページのエクスポートデフォルト{
    小道具: {
        // ルートで渡されたパラメータ id をコンポーネント id: String の props プロパティに分離します。
    },
    マウント: {
        コンソールログ(このID)
    }
}

また、パラメータを sessionStorage または localStorage に保存することで、ページ更新パラメータの損失の問題を解決することもできます。詳細については、実際のプロジェクトを参照してください。

以上がvueルータールーティングのページ更新時にパラメータが失われる場合の対処方法の詳細です。vueの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください！

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