kz’s blog

興味のあることについて書いていきます。

Vue Router で動的ルートマッチングをする

前提

Vue Router をインストールしていない場合はしておいて下さい。

Route 設定

src/router.js

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user-edit',
      component: () => import('./views/UserEdit.vue')
    }
  ]
})

path プロパティの :id 部分が動的になります。 id はリンクを貼る際に指定します。

リンクを貼る

<router-link :to="{ name: 'user-edit', params: { id: user.id } }">編集</router-link>

:to の内容をオブジェクトにしているのがポイントです。 name プロパティで使用するルータを指定して、params プロパティで id を指定しています。

2018/8/12 追記
<router-link :to="'/user/' + user.id">編集</router-link>

このように書くこともできます。

呼び出し先で上記の id を使用する

  • コンポーネント内(JavaScript)で使用する場合
this.$route.params.id
  • テンプレート内(HTML)で使用する場合
$route.params.id

公式ドキュメント

公式で詳しく紹介されていますのでそちらもどうぞ。

router.vuejs.org