Vue.js'deki bir URL'den sorgu parametrelerini nasıl alabilirim?

Vue.js'de sorgu parametrelerini nasıl alabilirim?

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

Getirmenin bir yolunu bulamıyor veya bunun için saf JS veya kitaplık kullanmam gerekiyor mu?

Route nesnesinin belgelerine göre $route, bileşenlerinizden ihtiyacınız olan şeyi ortaya çıkaran bir nesneye erişebilirsiniz . Bu durumda

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

Vue-route olmadan URL'yi bölün

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

Başka bir çözüm 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(){
  },

VueJS'in yeni başlayanlarına yardımcı olmak için daha ayrıntılı cevap:

• Öncelikle yönlendirici nesnenizi tanımlayın, uygun gibi görünen modu seçin. Rotaları güzergahlar listesinde bildirebilirsiniz.
• Daha sonra ana uygulamanızın yönlendiricinin var olduğunu bilmesini istersiniz, bu yüzden ana uygulama beyanında bildirin.
• Son olarak $ route örneği geçerli rota hakkındaki tüm bilgileri tutar. Kod, yalnızca URL'ye iletilen parametreyi günlüğe kaydedecektir. (* Mounted, document.ready'e benzer, uygulama hazır olur olmaz çağrılır.)

Ve kodun kendisi:

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

Başka bir yol (kullandığınız varsayılarak vue-router), sorgu parametresini yönlendiricinizdeki bir pervane ile eşlemektir. Sonra bileşen kodunuzdaki diğer herhangi bir pervane gibi davranabilirsiniz. Örneğin, bu rotayı ekleyin;

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

Sonra bileşeninizde pervaneyi normal olarak ekleyebilirsiniz;

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

O zaman mevcut olacak this.foove onunla istediğiniz her şeyi yapabilirsiniz (bir gözlemci ayarlamak gibi)

Bu tarihten itibaren, dinamik yönlendirme belgelerine göre doğru yol :

this.$route.params.yourProperty

onun yerine

this.$route.query.yourProperty

Vue-router'ı kullanabilirsiniz. Aşağıda bir örneğim var:

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

Not: In beforeRouteEnterbiz gibi bileşenin özelliklerini erişemez fonksiyonu: this.propertyNamei geçmesi neden .That en vmetmek nextfunction.It vue instance.Actually erişime recommented yoludur vmo vue örneğin standları

URL'niz şöyle görünüyorsa:

somesite.com/something/123

'123', 'id' adlı bir parametredir (url benzeri / bir şey:: id), şunu deneyin:

this.$route.params.id

Bu fonksiyonu kullanarak alabilirsiniz.

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

Sunucunuz php kullanıyorsa, bunu yapabilirsiniz:

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

Sadece çalışıyor.