Nuxt.jsで動的な値を利用してリンクを作成する

環境

Nuxt.js 2.7.1

フォルダ構成

pages/
--| users/
-----| _id.vue
-----| index.vue

実装

pathではなくnameを利用

<nuxt-link :to="{ name: 'users-id', params: { id: id } }">{{ userName }}</nuxt-link>

ルーティングの確認

自動生成された動的ルーティングを確認したい場合は.nuxt/router.jsを確認

router.js

    routes: [{
      path: "/users/:id",
      component: _ae4a17c4,
      name: "users-id"
    }]

参考

ルーティング - Nuxt.js