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

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?

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'

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

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

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.)

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

this.$route.params.yourProperty

anstatt

this.$route.query.yourProperty

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

Sie können mit dieser Funktion erhalten.

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

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

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

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

Funktioniert einfach.