router-linkで動的なURLを生成する

router-linkで動的なURLを生成する方法

参考にしました。

vue-router側

router.js

{ path: '/tasks/:id', name: 'tasks', component: TaskEdit }

component側

component.vue

// to=""ではなく、 :to="{{ }}"とする to=""では変数展開が出来ない
// nameとparamsを指定する

// 省略しているがv-forの中なので、
// paramに、task.idを渡すことで、それぞれのtaskへのリンクを生成出来る

<td><router-link :to="{name: 'tasks', params: {id: task.id}}" class="signup-link">task edit</router-link></td>

もし

/tasks/:id/edit

のようなURLにしたいなら、

router.js

{ path: '/tasks/:id/edit', name: 'tasks', component: TaskEdit }

とすれば良い。
https://www.ritolab.com/entry/180

さらに、

/tasks/:id/edit/:hoge_id

リソース/:id/リソース/:hoge_id
という風にしたいなら、

1
router-linkのparamsに、id部分に合致するパラメータを指定

2
router.jsのpathへ
リソース/id/リソース/hoge_id
のように記述する

component.vue

<td><router-link :to="{name: 'tasks', params: {id: task.id, edit_id: 10}}" class="signup-link">task edit</router-link></td>

router.js

{ path: '/tasks/:id/edit/:edit_id', name: 'tasks', component: TaskEdit }

上記の場合、

task/1/edit/10

というリンクが生成されます。