Overview

Nuxt3 を使って Custom Navigation を実装します。

大まか内容は公式の Pages の https://nuxt.com/docs/guide/directory-structure/pages/#navigation の部分に記載されてる内容です。

Usecase

以下のような Tab の UI を Nuxt3 を実現する際にこの Custom Navigation を使います。

例えばユーザーの詳細ページでいくつか情報のセクションを分けてタブで画面の遷移なく情報の表示を変えたいケースなどを考えます。

ディレクトリの構成のサンプルは以下です。

pages
   users
       [id]
          [tabName].vue

このときに $tabName で指定した tab にするときに navigateTo() を使ったメソッドを用意することで画面ロードが走らない画面遷移を実現することができます。

const selectTab = (tabName: string) => {
  navigateTo(`/users/${route.params.id}/${tabName}`)
}

上記のサンプルでは例えばユーザーのフォロー一覧を見る場合に /users/1/follows というような URL に遷移するように実装し、follows tab のページを [tabName].vue に実装します。

これでリロード無しで Nuxt3 上でタブ遷移やページ遷移を実装することができます。案外簡単だなと思ったのとこういうユースケースはちゃんとドキュメントで網羅されてるので目を通しておかないといかんなと思いました。