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 が欲しいところ。