Vue3（＋QuasarFW）で、VueRouterを使ったPropsの受け渡しが思った通りにできなかった話。

ディレクトリ構成

src
├── layouts
│ └── MainLayout.vue（ヘッダー/router-view/フッター）
├── pages
│ ├── TimerPage.vue
│ └── HomePage.vue
├── router
│ └── routes.ts
└── App.vue

やりたかったこと（当初のイメージ）

最初は下記の方法をイメージしていましたが、うまくいきませんでした。

MainLayout.vueにスタート/ストップボタンを記述
スタートボタンを押すと、HomeからTimerへ画面遷移する
TimerPage.vue内でタイマー開始
ストップボタンを押すとタイマーが終了
MainLayout.vueからTimerPage.vueへ、paramsで値を渡してTimerPage.vue内のメソッドを使いたい

最終的に解決した方法

ストップボタンのみTimerPage.vue内に配置しました。
そもそもストップボタンはTimerPage.vue内でしか使わないので、記述が煩雑になることは無かったです。
（似通った機能のボタン（＝スタート/ストップ）をまとめてフッターに置いておきたかったなーくらい？）

学んだこと

VueRouterの仕様変更

Vue2の時点ではparamsで渡す値は何でも良かったので、その変更を理解するところから困惑しました。

VueRouterを介したPropsの受け渡し

今回はrouter-viewの外側から値を渡そうとして、うまくいきませんでした（MainLayout.vueからTimerPage.vue）。
以前はrouter-viewの内部で行っていたので、そのあたりも影響したのかもしれません（例えばHomePage.vueからTimerPage.vue）。

終わりに

調べた感じだと、router-viewの外側の記述（＝MainLayout.vue）には、各ページへのリンクだけがおいてあるような事例が多かった様に思います。
フッターやヘッダーに、router-linkを配置するだけとか。
そもそもMainLayout.vueのようなコンポーネントに、ルーティング以外の処理をさせること自体が間違いなのかもしれません。

今回は特に理解が曖昧な部分も多く、正確な情報ではないかもしれません汗
ぜひ遠慮なくご指摘ください。
また今回のようなケースで解決策を持っている方がいらっしゃいましたら、ぜひ教えてくださいm(_ _)m