😀

Nuxtで未知の動的パスはどういう名前がつくのか調べた

2021/03/16に公開

Nuxt

tech

内容

たまに未知の動的パス（_.vue）を使うことがあるのですが、リンクを作成する場合どうするのがいいのか分からなかったので調べました。

私が担当しているプロジェクトではnuxt-linkは基本的にnameで指定しています。
なので以下のようなファイルであった場合、

pages
 |
 |- hoge.vue
 |- fuga
     |- index.vue
     |- _id.vue

以下のようにリンクを作成しています

<nuxt-link :to="{name: 'hoge'}">hoge</nuxt-link>
<nuxt-link :to="{name: 'fuga'}">fuga</nuxt-link>
<nuxt-link :to="{name: 'fuga-id', params: {id: 1}}">fuga</nuxt-link>

結果

ここで、以下のルーティングを追加することになったのですが、未知の動的ルートの場合はnameは何と書けばいいのか分からなかったので調べました。

pages
 |- piyo
     |- index.vue
     |- _.vue

この場合、リンクは以下になります

# /piyo
<nuxt-link :to="{name: 'piyo'}">piyo</nuxt-link>

# /piyo/1/2/3
<nuxt-link :to="{name: 'piyo-all', params: { pathMatch: '/1/2/3' } }">piyo(_.vue)</nuxt-link>

-allが末尾につけるようです。
そして、以降のパスをparams.pathMatchに指定します。
※toに直接パスを指定した場合はVue-routerの仕様でparamsに自動でpathMatchが入ります。

内容

結果

Discussion