Posted at

vue-routerで動的リンクを生成する

More than 1 year has passed since last update.

自分用のメモ。随時更新。


前提



  • 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>


参考