Vue.jsのURLからクエリパラメータを取得するにはどうすればよいですか？

Vue.jsでクエリパラメータをフェッチするにはどうすればよいですか？

例えばhttp://somesite.com?test=yay。

フェッチする方法が見つからない、または純粋なJSまたはこのためのライブラリを使用する必要がありますか？

ルートオブジェクトのドキュメントによると、$routeコンポーネントからオブジェクトにアクセスでき、必要なものを公開します。この場合

//from your component
console.log(this.$route.query.test) // outputs 'yay'

vue-routeなしで、URLを分割します

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.href.split('?');
    if (uri.length == 2)
    {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v){
        tmp = v.split('=');
        if(tmp.length == 2)
        getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated(){
  },

別のソリューションhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search：

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated(){
  },

VueJSの初心者を助けるためのより詳細な回答：

• まずルーターオブジェクトを定義し、適切と思われるモードを選択します。ルートリスト内でルートを宣言できます。
• 次に、メインアプリにルーターの存在を認識させたいので、メインアプリ宣言の中で宣言します。
• 最後に、$ routeインスタンスは現在のルートに関するすべての情報を保持します。コードは、URLで渡されたパラメーターのみをコンソールログに記録します。（* Mountedはdocument.readyに似ています。つまり、アプリの準備ができるとすぐに呼び出されます）

そしてコード自体：

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

別の方法（を使用していると想定vue-router）は、クエリパラメーターをルーターのプロップにマップすることです。次に、コンポーネントコード内の他の小道具と同じように扱うことができます。たとえば、このルートを追加します。

{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}

次に、コンポーネントに通常どおりに小道具を追加できます。

props: {
    foo: {
        type: String,
        default: null
    }
},

その後、それはとして利用可能にthis.fooなり、あなたはそれを使ってあなたがやりたいことを何でもすることができます（ウォッチャーの設定など）

この日付の時点で、動的ルーティングドキュメントによる正しい方法は次のとおりです。

this.$route.params.yourProperty

の代わりに

this.$route.query.yourProperty

vue-routerを使用できます。以下の例があります。

url： www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: ''
  },
  beforeRouteEnter(to, from, next) {
      if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
        next(vm => {
         vm.name = to.query.name
         vm.lastName = to.query.lastName
       })
    }
    next()
  }
})

注：ではbeforeRouteEnter、私たちは次のようにコンポーネントのプロパティにアクセスすることはできません機能：this.propertyName私は渡す持っている理由.Thatさんvmへnextfunction.ItはVUEがinstance.Actuallyアクセスにrecommented方法ですvm、それはVUEのインスタンスを表します

あなたのURLがこのようなものなら：

somesite.com/something/123

'123'は 'id'という名前のパラメーター（/ something /：idのようなURL）ですが、次のように試してください：

this.$route.params.id

この関数を使用して取得できます。

console.log(this.$route.query.test)

サーバーがphpを使用している場合、これを行うことができます。

const from = '<?php echo $_GET["from"];?>';

うまくいきます。