自分用のメモ。随時更新。
前提
-
vue-cliでのプロジェクト作成
（説明のため。もちろんリンクの生成自体はcliなしでできます）
VueRouterのルーターインスタンス作成
index.js
import Router from 'vue-router'
export default new Router({
routes: [
{
path: '/event/:id', // 動的セグメントをコロン:で設定
name: 'Event',
components: {
// 複数のコンポーネントを指定
}
},
]
})
リンク生成
vue-routerを使用してのリンク生成は幾つか方法がある。
router-linkタグを使用する
/event/1234のリンク
Hello.vue
<router-link v-bind:to="{ name : 'Event', params : { id: event.id }}"></router-link>
// event.id = 1234
/event?q=hogeのリンク
Hello.vue
<router-link v-bind:to="{ path: 'event', query: { q: 'hoge'}}"></router-link>
JavaScriptで記述する
vue-cliで生成されるプロジェクトに追加したコンポーネントは、自動的にmain.jsに記述されたVueインスタンスの内部に配置されるので、this.$router.push()を呼ぶことで遷移できる。もちろんimportしてもいい。
Hello.vue
<script>
router.push({ name: 'Event' })
</script>
router-linkのときと同じように、パラメータ・クエリを渡すこともできる
Hello.vue
<script>
router.push({ name: 'Event', params: { id: 1234 } })
router.push({ path: 'event', query: { q: 'hoge' } })
</script>