Vue.jsで「？」から始まるURLのクエリパラメータを設定・取得する方法

こんにちは。

Vue.jsで開発をしていて、URLのクエリパラメータで情報を送りたいと思ったことはありませんか？
この記事では、Vue.jsで「？」から始まるURLのクエリパラメータを設定・取得する方法について解説します。

※また、vue-routerは導入済みという前提です。

今回は、/my_page/というページにパラメータを送る想定で書いていきます。

  {
      path: '/my_page',
      component: myPage,
      name: 'myPage'
  }

※Vue.jsのタグが表示できないのでそのまま書いてます。

<router-link :to=”{name: ‘myPage’, query: {id: 1}}”>my_pageへリンク</router-link>

重要なのは、query: {id: 1} の部分。

このリンクをクリックすると、/my_page?id=1というURLになります。

これでURLにパラメータをつけることができました。

パラメータの取得は、次のコードで可能です。

  this.$route.query.{キー}

{キー}の部分は、今回の例でいうと、id になります。
自分のパラメータに合わせて変更してください。