Vue.js Abfrageparameter

Wie kann ich fetch query-Parameter in vue.js?

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

Kann nicht einen Weg finden, zu Holen oder muss ich mit reinem JS oder irgendeine Bibliothek?

InformationsquelleAutor der Frage Rob | 2016-03-10

  1. 85

    Laut der docs von route-ObjektSie haben Zugang zu einem $route Objekt aus Ihren Komponenten, das setzen, was Sie brauchen. In diesem Fall

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

    InformationsquelleAutor der Antwort Yerko Palma

  2. 17

    Ausführlichere Antwort zu helfen, die Neulinge von 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)
    },
});

    InformationsquelleAutor der Antwort Sabyasachi

  3. 6

    Ohne vue-route, teilen Sie die 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(){
  },

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

    InformationsquelleAutor der Antwort erajuan

  4. 0

    Können Sie vue-router.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 beforeRouteEnter - Funktion, die wir nicht zugreifen können, die Eigenschaften der Komponente wie: this.propertyName.Das ist, warum ich muss übergeben Sie die vm zu next Funktion.Es ist die recommented Weg, um den Zugriff auf die vue-Instanz.Tatsächlich ist die vm es steht für vue Instanz

    InformationsquelleAutor der Antwort roli roli

Schreibe einen Kommentar