はじめに

前回の記事で、SPAじゃなくて、
MPAとしてVue.jsアプリケーションを構築する手順をまとめました。。。
で、構築していて、クエリパラメータって、どう取得するのか疑問に思ったので…
調べましたので、まとめておきます・・・。

やってみた

test.vue

<template>
  <div id="app">
    <span>TESTです。{{ param1 }} , {{ param2 }}</span>
    <br>
    <span>{{ locationSearch }} </span>
  </div>
</template>

<script>

export default {
  name: 'Other',
  data: function(){
    return {
      locationSearch: '',
      param1 : '',
      param2 : ''
    }
  },
  created() {
    this.locationSearch = window.location.search;
    const urlParams = new URLSearchParams(window.location.search);
    this.param1 = urlParams.get("param1");
    this.param2 = urlParams.get("param2");
  }
}
</script>

<style>
</style>