2016-03-10 18 views
40

Come posso recuperare i parametri di query in vue.js?Parametri query Vue.js

http:://somesite.com?test=yay 

Non riesco a trovare un modo per andare a prendere o devo usare JS puri o qualche libreria per questo?

+1

Eventuali duplicati di [Come posso ottenere i valori delle stringhe di query in JavaScript?] (Http: //stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) –

+0

Perché questo down down è stato votato? Ne ho bisogno per Vue.js. Se c'è qualche libreria Vue o qualcosa di costruito in esso, sarebbe preferibile rispetto a raw js. – Rob

+0

Probabilmente c'è qualcosa in Vue Router che lo fa, se lo stai usando. –

risposta

52

Secondo i documenti di route object, è possibile accedere a un oggetto $route dai componenti, che espongono ciò che è necessario. In questo caso

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

Sì! Se non sta usando 'vue-router', questo sarebbe effettivamente un duplicato, dato che dovrà usare i metodi JS standard. – Jeff

+0

Suppongo solo che, poiché lo stesso utente ha postato poco prima di una domanda su vue-router, avrei creato il tag vue-router se avessi la reputazione di fare quel buon punto –

+1

! Sono andato avanti e ho creato il tag 'vue-router' e l'ho aggiunto. – Jeff

11

risposta più dettagliata per aiutare i neofiti di VueJs.

<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) 
    }, 
}); 
+1

Si prega di spiegarlo –

+0

Prima di definire l'oggetto router, selezionare la modalità che si adatta. È possibile dichiarare i percorsi all'interno dell'elenco rotte. Quindi vorrai che l'app principale sappia che il router esiste, quindi dichiaralo nella dichiarazione principale dell'app. Infine, l'istanza $ $ contiene tutte le informazioni sul percorso corrente. Il mio codice consoliderà il log solo il parametro passato nell'URL. (* Mounted è simile a document.ready, .e è chiamato non appena l'app è pronta) – Sabyasachi

+1

Per i neofiti più clueless: VueRouter non è incluso nel core di VueJS, quindi potresti voler includere separatamente VueRouter: '< script src = "https://unpkg.com/vue-router"> ' – rustyx

1

Senza vue-percorso, diviso l'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(){ 
    }, 

Un'altra soluzione 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(){ 
    }, 
+1

Perché dovresti dividere 'location.href' da solo quando c'è' location.search' prontamente disponibile? https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search ad es. 'var querypairs = window.location.search.substr (1) .split ('&');' Anche la divisione delle coppie nome-valore della query per' = 'non funzionerà sempre in quanto è possibile passare anche i parametri di query con nome senza valore, ad esempio '? par1 = 15 & par2' Il tuo codice ora solleverebbe un'eccezione sul par2 poiché la divisione con '=' risulterà in tmp con solo 1 elemento. – Arthur

+0

Scusate non lanciare un'eccezione ma non cattureresti neanche il par2. 'undefined' su' getVars ['par2'] '. – Arthur

+0

il metodo GET è una stringa (coppie nome/valore), nell'URL – erajuan