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?
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'
Sì! Se non sta usando 'vue-router', questo sarebbe effettivamente un duplicato, dato che dovrà usare i metodi JS standard. – Jeff
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 –
! Sono andato avanti e ho creato il tag 'vue-router' e l'ho aggiunto. – Jeff
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)
},
});
Si prega di spiegarlo –
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
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
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(){
},
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
Scusate non lanciare un'eccezione ma non cattureresti neanche il par2. 'undefined' su' getVars ['par2'] '. – Arthur
il metodo GET è una stringa (coppie nome/valore), nell'URL – erajuan
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) –
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
Probabilmente c'è qualcosa in Vue Router che lo fa, se lo stai usando. –