Wie kann ich Abfrageparameter von einer URL in Vue.js abrufen?

249

Wie kann ich Abfrageparameter in Vue.js abrufen?

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

Sie können keinen Weg zum Abrufen finden oder muss ich dafür reines JS oder eine Bibliothek verwenden?

rauben
quelle
5
Warum wird dies abgelehnt? Ich brauche es für Vue.js. Wenn eine Vue-Bibliothek oder etwas Eingebautes vorhanden ist, wird diese gegenüber Raw-Js bevorzugt.
Rob
Es gibt wahrscheinlich etwas in Vue Router, das dies tut, wenn Sie das verwenden.
Joe Clay
54
Es gibt nicht einmal annähernd ein Duplikat. vue.js ist ein Framework mit einer bestimmten Logik, die sich von Vanila Javascript unterscheidet
Yerko Palma
13
Wie kann dies ohne Vue-Router erreicht werden?
Connor Leech

Antworten:

344

Nach der Dokumentation der Route Objekt , haben Sie Zugriff auf ein $routeObjekt aus Ihren Komponenten, das enthüllen , was Sie brauchen. In diesem Fall

//from your component
console.log(this.$route.query.test) // outputs 'yay'
Yerko Palma
quelle
7
Jep! Wenn er nicht verwendet, vue-routerwäre dies in der Tat ein Duplikat, da er Standard-JS-Methoden verwenden muss.
Jeff
1
Ich gehe einfach davon aus, dass ich, da derselbe Benutzer kurz vor einer Frage zu Vue-Router gepostet hat, das Vue-Router-Tag erstellen würde, wenn ich den Ruf dazu hätte
Yerko Palma
2
guter Punkt! Ich habe das vue-routerTag erstellt und hinzugefügt.
Jeff
Das Problem besteht darin, dass die Vue-Dokumentation die Kopplung von Komponenten an den Router als unerwünscht erachtet. Sie empfehlen, Requisiten zu übergeben, aber es scheint nicht möglich zu sein, Abfrageparameter dynamisch als Requisiten zu übergeben. Zum Beispiel in einem beforeEach-Wächter, der so etwas tut, return next({ name: 'login', query:{param1: "foo" }, });funktioniert nicht. Innerhalb der Login-Komponente ist die Requisite param1undefiniert.
Hraynaud
45

Teilen Sie die URL ohne Vue-Route

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

Eine andere Lösung 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(){
  },
Erajuan
quelle
2
Warum sollten Sie sich location.hreftrennen, wenn es location.searchverfügbar ist? developer.mozilla.org/en-US/docs/Web/API/… zB Das var querypairs = window.location.search.substr(1).split('&');Aufteilen der Abfrage-Name-Wert-Paare durch '=' funktioniert nicht immer, da Sie benannte Abfrageparameter auch ohne Wert übergeben können. Beispiel: ?par1=15&par2Ihr Code würde jetzt eine Ausnahme auf Par2 auslösen, da das Teilen durch '=' zu tmp mit nur 1 Element führt.
Arthur
1
Sorry würde keine Ausnahme auslösen, aber du würdest auch nicht par2 fangen. Wie Sie im Grunde zuweisen undefinedzu getVars['par2'].
Arthur
Die GET-Methode ist eine Zeichenfolge (Name / Wert-Paare) in der URL
Erajuan
@Arthur Sie haben Recht, ich habe eine Validierung hinzugefügt und ich habe eine andere Lösung hinzugefügt. danke
erajuan
37

Detailliertere Antwort, um den Neulingen von VueJS zu helfen:

  • Definieren Sie zuerst Ihr Router-Objekt und wählen Sie den Modus aus, den Sie für geeignet halten. Sie können Ihre Routen in der Routenliste deklarieren.
  • Als nächstes möchten Sie, dass Ihre Haupt-App weiß, dass der Router vorhanden ist. Deklarieren Sie ihn daher in der Deklaration der Haupt-App.
  • Schließlich enthält die Instanz $ route alle Informationen zur aktuellen Route. Der Code protokolliert nur den in der URL übergebenen Parameter. (* Mounted ähnelt document.ready, .ie wird aufgerufen, sobald die App bereit ist.)

Und der Code selbst:

<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)
    },
});
Sabyasachi
quelle
7
Bitte erklären Sie es
Muhammad Muazzam
Definieren Sie zuerst Ihr Router-Objekt und wählen Sie den Modus aus, den Sie für geeignet halten. Sie können Ihre Routen in der Routenliste deklarieren. Als nächstes möchten Sie, dass Ihre Haupt-App weiß, dass der Router vorhanden ist. Deklarieren Sie ihn daher in der Deklaration der Haupt-App. Schließlich enthält die Instanz $ route alle Informationen zur aktuellen Route. Mein Code protokolliert nur den in der URL übergebenen Parameter. (* Mounted ist ähnlich wie document.ready, .ie wird aufgerufen, sobald die App fertig ist)
Sabyasachi
3
Für noch ahnungslosere Neulinge: VueRouter ist nicht im VueJS-Kern enthalten, daher möchten Sie den VueRouter möglicherweise separat einbinden:<script src="https://unpkg.com/vue-router"></script>
Rustyx
2
@Sabyasachi Bearbeiten Sie Ihre Antwort und fügen Sie diese Informationen in den Beitrag selbst ein.
Simon Forsberg
1
new Vue({ router, ... })ist keine gültige Syntax.
Crescent Fresh
17

Eine andere Möglichkeit (vorausgesetzt, Sie verwenden vue-router) besteht darin, den Abfrageparameter einer Requisite in Ihrem Router zuzuordnen. Dann können Sie es wie jede andere Requisite in Ihrem Komponentencode behandeln. Fügen Sie beispielsweise diese Route hinzu.

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

Dann können Sie in Ihrer Komponente die Requisite wie gewohnt hinzufügen.

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

Dann wird es verfügbar sein this.foound Sie können alles tun, was Sie wollen (wie einen Beobachter einstellen usw.)

Mike P.
quelle
Das ist toll. Das fehlende Teil des Puzzles ist die Einweihung. Sie können dies folgendermaßen tun: `this. $ Router.push ({name: 'mypage', Abfrage: {foo: 'bar'})`
slf
7

Ab diesem Datum ist der korrekte Weg gemäß den dynamischen Routing-Dokumenten :

this.$route.params.yourProperty

anstatt

this.$route.query.yourProperty
Marco
quelle
3
Sie sind nicht dasselbe! Sie sollten verwenden query, um die Abfragen von der URL abzurufen. Aus den Dokumenten: Zusätzlich zu $ ​​route.params macht das $ route-Objekt auch andere nützliche Informationen verfügbar, wie z. B. $ route.query (wenn die URL eine Abfrage enthält)
hatef
Danke für die Klarstellung :)
Marco
2

Sie können vue-router verwenden. Ich habe ein Beispiel unten:

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

Hinweis: In beforeRouteEnterFunktion können wir nicht die Eigenschaften der Komponente zugreifen wie: this.propertyName.Das ist , warum ich die passieren müssen , vmum nextfunction.It ist die recommented Weg zum Zugang der vue instance.Actually die vmes für vue Instanz steht

roli roli
quelle
1

Sie können mit dieser Funktion erhalten.

console.log(this.$route.query.test)
Revati Raman
quelle
1

Wenn Ihre URL ungefähr so ​​aussieht:

somesite.com/something/123

Wenn '123' ein Parameter mit dem Namen 'id' ist (URL wie / etwas /: id), versuchen Sie Folgendes:

this.$route.params.id
Trishke
quelle
-6

Wenn Ihr Server PHP verwendet, können Sie dies tun:

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

Funktioniert einfach.

Cao Shouguang
quelle
2
Die Frage war, wie man etwas mit Vue macht, nicht mit PHP.
Robertmain