nuxt-i18n を使っている時の nuxt-link の params

備忘録。

nuxt-i18n を使っている時に Nuxt.js の nuxt-link の params が動かなくなるケースとそのワークアラウンドについて。

nuxt-i18n で国際化対応を行う場合、ルーティングのパスや Vue router に登録される name が言語付きのものに書き換わる。そのため nuxt-link に直接書いていたパスや name は使えなくなる。nuxt-i18n はこの問題に対処するために、localePath というヘルパーを用意している。

// Before
<nuxt-link :to="'about'" />
<nuxt-link :to="{ name: 'profile', params: { id: x } }" />

// After
<nuxt-link :to="localePath('about')" />
<nuxt-link :to="localePath({ name: 'profile', params: { id: x } })" />

localePath は nuxt-link の to に渡すオプションをそのまま受け取り、国際化対応後のパスに変換してくれる。

基本的にはこれでも問題がない。しかし、params がパスパラメータに含まれない時に遷移先のページで欠落する。Issue としても報告されている。

ワークアラウンドにこの Issue は閉じられている。デフォルトでは国際化対応後の name はオリジナルに ___ と言語がくっついたものになるので、以下のようにすればいい。

<nuxt-link :to="{ name: `profile___${$i18n.locale}`, params: { id: x } }" />

しかし、この区切り文字は nuxt-i18n の設定によって変更されうるので、name だけを変換する localeName のような API が欲しいところ。