Vue ページがジャンプしてオブジェクトを渡す

Vue でオブジェクトを渡すには、ルーティング パラメーターを介して渡すことができます。$route オブジェクトを使用できます。このオブジェクトには、ページ パス (path)、パラメータ (params) などを含む多くの属性が含まれています。

以下は、Vue でページ ジャンプ渡しオブジェクトを実装するためのサンプル コードです。

ジャンプする前に、文字列に渡されるオブジェクトをシリアル化し、それをルーティング パラメーター params の値として設定します。

let obj = { name: "John", age: 30 };
let encodedObj = btoa(JSON.stringify(obj)); // 将对象序列化并编码为可读的字符串
this.$router.push({path: '/destination', params: {myObj: encodedObj}});

受信ページで、$route オブジェクトを通じてルート パラメーター params を取得し、デコードして逆シリアル化して元のオブジェクトを取得します。

mounted() {
  let encodedObj = this.$route.params.myObj;
  let obj = JSON.parse(atob(encodedObj)); // 解码并反序列化对象
  console.log(obj); // { name: "John", age: 30 }
}

ここでは、JavaScript の組み込み関数 `btoa()` および `atob()` を使用してオブジェクトをシリアル化、エンコード、デコードします。

このメソッドを使用すると、Vue アプリケーションの異なるページ間で単純な JSON 形式のオブジェクトを渡すことができることに注意してください。より複雑なオブジェクトの場合は、データがページ間で正しく渡されることを確認するために、より多くの処理と検証が必要になる場合があります。

役に立ったら「いいね！」して、良い習慣を身につけてください！

質問、交換、激励などメッセージを残してください！