router-linkで動的リンクを生成する際の書き方まとめ

Vue.jsのrouter-linkで動的リンクを生成する際の構文をまとめておきます。

画面上に記事が並んでいて、各記事のボタンを押すとその記事のページに遷移する、そんな機能を作っていると考えてください。各記事のid番号は取得できていて、それを使ってリンクを動的に生成したいとします。
ボタンクリックイベントをどのように実装すれば良いでしょうか？

nameで遷移先を指定する方法

toプロパティを使って遷移先を指定する部分が重要。

name:router.jsのnameプロパティに一致する値を指定
params:{〇〇(router.jsで受け取るparameter):各記事のid}

ボタンクリックイベント

article.vue

<router-link :to="{name:'detail',params:{id:article.id}}">Read more</router-link>

Router.js

router.js

routes: [{
    path: '/article/:id',
    name: 'detail',
    component: Article
  }]

pathで遷移先を指定する方法

nameで遷移先を指定する方法とは異なり、router.jsのnameプロパティは不要。

同じくtoプロパティを使って遷移先を指定する部分が重要。

``(バックコーテーション)で囲んでrouter.jsのpathプロパティに合致する値を記述する。パラメータは${}の中に記述する。

ボタンクリックイベント

article.vue

<router-link :to="`article/${article.id}`">Read more</router-link>

Router.js

router.js

routes: [{
    path: '/article/:id',
    // name: 'detail',
    component: Article
  }]