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

前提

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>

前提

VueRouterのルーターインスタンス作成

リンク生成

router-linkタグを使用する

/event/1234のリンク

/event?q=hogeのリンク

JavaScriptで記述する

参考

`/event/1234`のリンク

`/event?q=hoge`のリンク