vue の画面遷移時のアニメーションについて

以下の制作会社を見ていただきナビをクリックすると画面遷移する際に、アニメーションして画面が変わると思います。

このサイトがvueなのか分かりませんが、こういうことをvueのspaで再現するにはどうするのか試してみたくなり、コマンドでvue + nuxtで適当なプロジェクトを作成して試してみました。

画面遷移はrouterの機能でrouter-linkで実装できますが、いろいろ調べてみたところ、beforeEachやらafterEachがあることを知ったので、router.js内に以下のように記載しました。

javascript
1
2const router = new Router(routerOptions)
3
4router.beforeEach((to, from, next) => {
5  alert("beforeEach")
6  next()
7})
8
9router.afterEach(() => {
10  alert("aftereach")
11})
12
13
14export function createRouter() {
15  return router
16}
17

そうすることで、画面遷移時にアラートが表示されるようになりましたが、実際にここに参考サイトのようにアニメーションさせる場合、どのように組み込んだらいいのかわかりません。
vue+nuxtをlocalhostでアクセスするとindex.vueが表示されて他のページは例えばother.vueなど作成しrouter-linkで設定すれば簡単な画面遷移は分かるのですが。。

ですので知りたいことは以下になります。

・router.beforeEachで画面遷移を検知するのはあっているか？
・アニメーションするブロック要素を例えばAnimeBlock.vueなどコンポーネント化すればいいのか？
・コンポーネント化の場合で全部のページで共通で使いたい場合は、各ページ（index.vueやother.vue）なので読み込むのか？
・コンポーネント化した場合の画面遷移のイベントを検知するにはどうしたら？ emitで検知？

説明不足だと思いますが、よろしくお願いいたします。