vue.js
vue-router

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>

参考