<nuxt-link> でパラメータを渡す

備忘録。

Nuxt.js の <nuxt-link> の使い方。

Nuxt.js アプリケーション内のページ遷移では <nuxt-link> を使うことが推奨されている。

<nuxt-link> は Vue Router <router-link> を拡張している。

例えば以下のようなページ構成を考える。

pages
├── admin.vue
└── index.vue

index.vue では /admin へのリンクを次のように記述できる

<nuxt-link to="/admin">Admin</nuxt-link>
<nuxt-link :to="{ path: '/admin' }">Admin</nuxt-link>
<nuxt-link :to="{ name: 'admin' }">Admin</nuxt-link>

さて admin.vue でなんらかのデータをリンク元から受け取りたい場合について考える。

<nuxt-link> はオプションで params に値を渡すことができる。

<nuxt-link :to="{ name: 'admin', params: { message: 'hello' } }">

この例では message として 'hello' を渡している。なおリンク先の指定に path ではなく name を使っていることに注意。（path を使う場合、params は無視される）

admin.vue では asyncData の引数に渡されるコンテキスト経由で params を取り出せる。

{
  async asyncData({ params }): {
    doSomething(params.message)
  }
}