Vue.jsで画面遷移する際、ベターな値渡しの方法を知りたいです

概要

vue.jsでSPAのWebシステムを作成しています。
A画面の値をB画面に渡し表示することを考えています。
色々値渡しの方法はあるかと思いますが、どの方法が一般的であるのか教えていただきたいです。

個人的な感想

新しい画面の遷移であり、親コンポーネント子コンポーネントの関係になることに違和感があります。ですのでpops、provideでの値渡しを実装しませんでした。
現状$route.paramsを使った値渡しを実装していますが、生データをURLの後ろにつけることになってしまったので、ユーザさんに生データを見せることが気持ち悪いです。これは$route.queryでも同じ実装になると認識しています。
フロントエンドに明るくなくこのような気持ちになっているのですが、これらの方法は一般的な値渡しの方法でしょうか？より良い、一般的な方法があれば教えていただきたいです。

参考ページ

https://cloudsmith.co.jp/blog/frontend/2020/12/1656030.html
https://dk521123.hatenablog.com/entry/2021/03/02/001653

現状のコード

####app.js(ルーティング)

js
1//...
2const router = new VueRouter({
3    mode: 'history',
4    routes: [
5        {
6            path: '/AMenu',
7            name: 'a.menu',
8            component: AMenuComponent
9        },
10        {
11            path: '/BMenu/:Id',
12            name: 'b.menu',
13            component: BMenuComponent,
14            props: true
15        },
16    ]

####AMenuComponent.vue

vue
1<template>
2    <div class="container">
3        <a class="btn-square" @click ="GoBMenu">B画面へ進む</a>
4    </div>
5</template>
6
7<script>
8    export default {
9        methods: {
10            GoBMenu(){
11                    this.$router.push({
12                        name:'b.menu',
13                        params: {
14                            Id: 'testId',
15                        }
16                    });
17            }
18        }
19    }
20</script>
21
22<style scoped>
23
24.btn-square {
25    font-size: 200%;
26    display: inline-block;
27    width: 50%;
28    min-width: 500px;
29    max-width: 2000px;
30    padding: 10px;
31    text-decoration: none;
32    text-align: center;
33    background: #668ad8;/*ボタン色*/
34    color: #FFF;
35    border-bottom: solid 4px #627295;
36    border-radius: 3px;
37}
38</style>

####BMenuComponent.vue

vue
1<template>
2    <div class="container">
3        {{this.$route.params.Id}}
4    </div>
5</template>
6
7<script>
8    export default {
9    }
10</script>