Vue.jsでURLパラメータから値を取り出す

http://hogehoge.com/info?edit=true&id=123456

上記のようなパラメータを含んだURLから、パラメータの値を取り出す。
今回、編集ページとそれ以外でページの分岐を行い、またパラメータでIDを渡す事を行った。

———————————————

◆routes.jsでprops使う方法
コンポーネントの中でthis.$routeを呼ぶより、routes.jsでprops使うほうが再利用性が高い。

▽コンポーネント

<script>
export default {
  props: {
    id: {
      type: String,
      required: false
    }
  }
};
</script>

▽routes.js

const routes = [
  {
    props: route => ({
      id: route.query.id
  })
}

———————————————

◆コンポーネントの中でthis.$routeを取得
▽コンポーネント

<script>
export default {
  computed: {
    getParameter() {
      return {
        edit: this.$route.query.edit,
        id: this.$route.query.id
      };
    }
  }
};
</script>

※パラメータの表示

▽該当ページのeditの値を取得
{{getParameter.edit}}
▽パラメータからidを取得
{{ getParameter.id }}

———————————————

◆router-linkでパラメータを付与する方法
例）http://hogehoge.com/mypage?id=1

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

例02）http://hogehoge.com/mypage?id=1&item=2

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

参考サイト

Code Pocket

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

https://code-pocket.info/20190629232/