VueRouter のページ遷移間でオブジェクトを受け渡す方法

Question

#概要
TypeScript + Vue.js で画面を作成しています。
Vue.js のバージョンは 2.6.11 です。

画面間の遷移に VueRouter を使っているのですが、
理解が不足していてやりたいことができずに困っています。

やりたいことは、VueRouter を使ったページ遷移間で
任意のオブジェクトを渡したい、ということです。

#説明

ページA→ページBの遷移を行う際は次のようにしています。

this.$router.push({name: 'ページB'});

これでページ遷移はできるのですが、このタイミングでページBに
ページAの持っているオブジェクトを渡したいのですが、
どのように記述すればよいかが見つけられません。

ネットを検索するとそれらしき記事は見かけるのですが、
任意の構造のオブジェクトを渡している記事を見つけられませんでした。

#見つけた方法
ルート定義に prop: true と記述したうえで、ページ遷移処理を次のようにすると
遷移先のページの prop にオブジェクトを渡せるような記述はあるのですが
params に渡すオブジェクトの型が合っていないためエラーになってしまいます。

this.$router.push( {name: 'ページB', params: オブジェクト } )

VueRouter の型定義を見てみると、
push() に渡す Location 型オブジェクトの params プロパティは
Dictionary<string> 型なので、任意の構造のオブジェクトは渡せないようにも思えます。
（キー、値が文字列なオブジェクトだけしかダメ？）

#お願い

VueRouter を使ったページ遷移の際に任意のオブジェクトを渡す書き方をご存知の方がいらっしゃいましたら
その可否も含めて書き方をご教授いただけますでしょうか。

この辺の情報が記述されている記事の場所だけでもお教えいただけますととても助かります。

以上よろしくお願いいたします。

Answer 1

VueRouterでの画面遷移はURLを伴うので、URLで表現できないオブジェクトを扱うことはできない気がします。

paramsはURLのパスに相当するので、そこに任意のオブジェクトを載せるのは難しい気がします。
一方、queryならオブジェクトをシリアライズした情報を渡して、遷移先でオブジェクトに戻すようなやり方はできるかもしれません。

ページA側

const obj = {a: { b: {c: 1}}};
this.$router.push({ name: 'ページB', query: { obj: JSON.stringify(obj) } });

ページB側

console.log(JSON.parse(this.$route.query.obj));

ただし、URLが変更されてオブジェクトが壊れたりすることを考えると、pushでオブジェクトをやり取りするのはあまりいい方法ではない気がします（目的次第ですが）

Vuexでオブジェクトを共有するような方法の方が普通だと思いました。

Comments

[morita4130002]

popobotさん、ご回答ありがとうございます。

>VueRouterでの画面遷移はURLを伴うので、URLで表現できないオブジェクトを扱うことはできない

やはりそうなのですね。
そんな雰囲気は感じていたのですが、明記されている記述が見つけられなかったので
もやもやしてました。

> オブジェクトをシリアライズした情報を渡して、遷移先でオブジェクトに戻すようなやり方

なるほど、シリアライズすれば文字列で渡せますね。

> Vuexでオブジェクトを共有するような方法の方が普通だと思いました。

私もそんな気がします。

どうもありがとうございました。