作成日: 2023.10.31

Vue の画面遷移時のときにgetのクエリではなくpostのパラメータで渡したい

Vue で 画面遷移をするときに、

this.$router.push({path: '/hoge', query: {aaa: 'aaaaa'}});

みたいな感じでクエリを渡していた。
１，２個なら別にいいんだけど、結構な数の値を渡すとURLがめっちゃ汚くてなんかいや。

なので、POSTのパラメータで渡すことができないか調べた。
(POSTというのかしらんが、ようはＧＥＴのクエリじゃない方法でという意味）

paramsを使う

以下のように送ればよい。
GETで送るときはpathとqueryだったが、これをnameとparamsにするだけ。簡単。

this.$router.push({name: 'Confirms', params: {patrol_plan_id: patrol_plan_id}}); // propsを使う場合はnameとparamsなので注意

なお、ここで指定するnameは、router.js に 記載している値。

以下みたいな感じでrouter.jsに書いているはず。それのnameの値。pathの値じゃないから要注意！
(自分も最初、pathをnameにしただけで、値は /hogeのままにしてたので何度やってもうまくいかなかった。

    {
        path: '/hoge',
        name: 'Hoge',
        component: () => import('./components/Hoge.vue'),
        props: true
    },

ちなみに、 props:true としているが、別にいらん。

んで、受け取り側は、適当な関数の中で（以下の例だと mounted() 内だが）

mounted() {
        var aaa = this.$route.params.aaa;

で取得できる。queryの時は、 this.$route.query.aaaだったのでqueryをparamsに変更しただけ。

簡単！

以上！

[Vue warn]: Extraneous non-props attributes (aaa) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

なんかしらんけど、

[Vue warn]: Extraneous non-props attributes (aaa) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

とかいう警告が出てきしょい。

これは以下のように inheritAttrs: false, とおまじないを書いておくと出てこなくなる。

export default {
    inheritAttrs: false,

再読み込み時はデータが消える

queryで渡す場合は当然だけどクエリパラメータに値があるので、F5キーとかで更新しても値は消えない（URLにデータがあるから）

が、paramsで渡すようになった場合、ブラウザを更新したらデータは消える。

ので、画面の更新があることが前提の場合はqueryを使うか、または、paramsが渡された段階でセッションなどに保存するなどの措置が必要となる。

---

---

---

---