一日一処: Nuxtで画面遷移するためのnavigateToとrouter.pushについて
Nuxtでの画面遷移
いくつか方法があるが、一番最初にふれるのは、useRouterを使用した、router.pushではないだろうか。ただ、経験を積み重ねていくと、いつからかnavigateTo関数の存在をしることとなる。なぜ、同時に知ることができないのか、後悔してしまう。
router.push(useRouter)の中身
基本的には、useRouterを使用する場合、この中身はvue-routerと同じとのことだ。定義は、以下で行われている。
ただ、useNuxtAppから$routerを呼び出している。記法からおそらくpluginで挿入されたものだろう。調べると以下に記述があった。
この設定の最後にて、Routerを提供(provide)していることがわかる。
ここまでソースコードを読んで、思うのは、Nuxtそのものの仕組みに則ってNuxt標準機能も実装されているので、本当にストレス無く見れる。素晴らしい。
そして、このrouterでは、pushメソッドはこのように定義されている。
この呼び出されている関数の中では、普通にhistoryの更新をおこなっているようだった。
navigateToの中身
こちらは、そこまで書くことがない。 navigateToの関数は、最後に状況によっては、router.pushを実行している。完全に同じもののようだ。ただし、この関数の中を見ると、別タブの表示など、色々できることがわかる。実際にドキュメントにも複数のオプションがあるため、こちらの方が利便性が高い。
どちらを選ぶのか
実際、routerを使う場合、直接的にrouterの様々な機能を使用したい場合に限るだろう。そうではない場合は、navigateToで事足りる。useRouterを記述する必要もないので、一行分削減もできる。公式のDiscussionでもどちらがいいのかという質問があるが、navigateToのほうが、「The nice thing is, it's simple & ease to use.（シンプルで使いやすい）」とのことなので、基本的には、navigateToを用いるのが良さそうだ。
Discussion