Bagaimana saya bisa mendapatkan parameter kueri dari URL di Vue.js?

Bagaimana saya bisa mengambil parameter kueri di Vue.js?

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

Tidak dapat menemukan cara untuk mengambil atau apakah saya perlu menggunakan JS murni atau pustaka untuk ini?

Menurut dokumen objek rute , Anda memiliki akses ke $routeobjek dari komponen Anda, yang mengekspos apa yang Anda butuhkan. Pada kasus ini

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

Tanpa vue-route, bagi 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(){
  },

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

Jawaban yang lebih terperinci untuk membantu para pemula VueJS:

• Pertama tentukan objek router Anda, pilih mode yang menurut Anda cocok. Anda dapat mendeklarasikan rute Anda di dalam daftar rute.
• Selanjutnya Anda ingin aplikasi utama Anda tahu router ada, jadi deklarasikan di dalam deklarasi aplikasi utama.
• Terakhir, mereka $ route instance menyimpan semua informasi tentang rute saat ini. Kode akan menghibur log hanya parameter yang dilewatkan di url. (* Mounted mirip dengan document.ready, .yai dipanggil begitu aplikasi siap)

Dan kode itu sendiri:

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

Cara lain (dengan asumsi Anda menggunakan vue-router), adalah untuk memetakan param kueri ke prop di router Anda. Kemudian Anda dapat memperlakukannya seperti penyangga lain dalam kode komponen Anda. Misalnya, tambahkan rute ini;

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

Kemudian di komponen Anda, Anda dapat menambahkan penyangga seperti biasa;

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

Maka akan tersedia this.foodan Anda dapat melakukan apa pun yang Anda inginkan dengannya (seperti mengatur pengamat, dll.)

Pada tanggal ini, cara yang benar sesuai dengan dokumen perutean dinamis adalah:

this.$route.params.yourProperty

dari pada

this.$route.query.yourProperty

Anda dapat menggunakan vue-router. Saya punya contoh di bawah ini:

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

Catatan: Dalam beforeRouteEnterfungsi kita tidak bisa mengakses properti komponen seperti: this.propertyName.Itu ini mengapa saya harus lulus vmuntuk nextfunction.It adalah cara recommented untuk mengakses vue yang instance.Actually yang vmberdiri misalnya vue

Jika url Anda terlihat seperti ini:

somesite.com/something/123

Di mana '123' adalah parameter bernama 'id' (url like / something /: id), coba dengan:

this.$route.params.id

Anda bisa mendapatkan Dengan Menggunakan fungsi ini.

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

Jika server Anda menggunakan php, Anda dapat melakukan ini:

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

Hanya bekerja.