Nuxt.jsのコーディングをしていてnuxt-linkで少しハマったのでメモ。結論から書くと、nuxt-linkで動的な値を受け取る場合はtoの前にコロンをつけて:toにする必要があるみたい、という話。
Nuxt.jsでページ間を遷移する時に便利なのがnuxt-linkコンポーネント。(若干呼び方合ってるか自信ないですが、公式にコンポーネントと書かれてたので引用)
htmlでのaダグみたいな感じで<nuxt-link>で他のページへのリンクを作れて、to=""で遷移先を指定する。
なのでNuxtのディレクトリ構造でpages配下にabout.vueがあり場合、
<nuxt-link to="about">About</nuxt-link>
と書けばaboutページへのリンクが追加できるのですが、遷移先が一意のidでアクセスするような動的なページの場合はうまく動作しませんでした。
そこで色々調べた結果、動的な値をnuxt-linkに渡す場合はtoの前にコロンをつけて書く必要があるとのことでした。 下記はabout/一意のidでページ遷移する場合。
<nuxt-link :to="'about/' + id">About</nuxt-link>
