Vue3: Vue3 の URL にパラメーターを追加せずにルートにパラメーターを送信するにはどうすればよいですか?

Question

Vue3 では、URL に値を表示せずにルートに属性を渡す方法はありますか?

ルートを次のように定義します:

リーリー

このルートを

と呼びます。 リーリー

パスを path: '/someRoute/:message', に変更すると、メッセージは正常に配信されますが、メッセージを URL に表示せずに配信したいだけです。

このアプローチを使用した Vue2 の例をいくつか見てきました (例: https://stackoverflow.com/a/50507329/1572330) が、どうやらそれらは Vue3 では機能しなくなったようです。

Vue3 ドキュメントにもすべての例があります (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs) .org/guide/essentials/passing-props.html) URL 自体を通じて値を渡すため、それがまだ可能かどうかはわかりません。

これに関するアイデアは役に立ちます。

Answer 1

最後に、変更ログで関連するコンテンツをいくつか見つけました: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

明らかに、属性を URL に表示せずにパラメータ経由で送信することはできなくなりました。しかし幸運なことに、彼らはいくつかの代替案を持っています。 私のケースで最もうまくいったのは、 の代わりに state: { ... }

を使用することでした。 リーリー

ここで、ページのコードで、history.sate からプロパティを読み取り、その値を必要なプロパティに入力します。

URL/ルート自体が変更されない場合は、更新フックを用意し、force: true

を使用する必要があります。 リーリー

PS history.state にはいくつかの制限があるため、場合によっては、変更ログ内の他の提案のいずれかの方が適切である可能性があります