Come posso ottenere parametri di query da un URL in Vue.js?

Come posso recuperare i parametri della query in Vue.js?

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

Non riesci a trovare un modo per recuperare o devo usare JS puro o qualche libreria per questo?

Secondo i documenti dell'oggetto route , hai accesso a un $routeoggetto dai tuoi componenti, che espongono ciò di cui hai bisogno. In questo caso

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

Senza vue-route, dividi 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(){
  },

Risposta più dettagliata per aiutare i neofiti di VueJS:

• Per prima cosa definisci l'oggetto router, seleziona la modalità che ritieni adatta. Puoi dichiarare i tuoi percorsi all'interno dell'elenco dei percorsi.
• Successivamente vorrai che la tua app principale sappia che esiste il router, quindi dichiaralo nella dichiarazione dell'app principale.
• Infine, l'istanza $ route contiene tutte le informazioni sulla rotta corrente. Il codice conserverà il log solo del parametro passato nell'URL. (* Montato è simile a document.ready, .ie viene chiamato non appena l'app è pronta)

E il codice stesso:

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

Un altro modo (supponendo che tu stia utilizzando vue-router) è mappare il parametro della query su un oggetto nel tuo router. Quindi puoi trattarlo come qualsiasi altro oggetto nel tuo codice componente. Ad esempio, aggiungi questo percorso;

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

Quindi nel tuo componente puoi aggiungere l'elica normalmente;

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

Quindi sarà disponibile come this.fooe puoi fare tutto quello che vuoi (come impostare un osservatore, ecc.)

A partire da questa data, il modo corretto secondo i documenti di routing dinamico è:

this.$route.params.yourProperty

invece di

this.$route.query.yourProperty

Puoi usare vue-router. Ho un esempio qui sotto:

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()
  }
})

Nota: in beforeRouteEnterfunzione non possiamo accedere alle proprietà del componente come:. this.propertyNameEcco perché ho passato la funzione vmto. nextÈ il modo consigliato per accedere all'istanza di Vue. In vmrealtà, sta per istanza di Vue

Se l'URL è simile al seguente:

somesite.com/something/123

Dove '123' è un parametro chiamato 'id' (url like / qualcosa /: id), prova con:

this.$route.params.id

È possibile ottenere utilizzando questa funzione.

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

Se il tuo server utilizza php, puoi farlo:

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

Funziona e basta.