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


251

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?


5
Mengapa ini turun memilih? Saya membutuhkannya untuk Vue.js. Jika ada beberapa vue library atau sesuatu yang dibangun di dalamnya akan lebih disukai daripada js mentah.
Rob

Mungkin ada sesuatu di Vue Router yang melakukannya, jika Anda menggunakannya.
Joe Clay

54
Bahkan tidak ada duplikat. vue.js adalah kerangka kerja dengan logika tertentu, berbeda dengan vanila javascript
Yerko Palma

13
Bagaimana ini bisa dilakukan tanpa vue-router?
Connor Leech

Jawaban:


345

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'

8
Ya! Jika dia tidak menggunakan vue-routerdaripada ini memang akan menjadi duplikat, karena dia perlu menggunakan metode JS standar.
Jeff

1
Saya hanya berasumsi bahwa karena pengguna yang sama memposting tepat sebelum pertanyaan tentang vue-router, saya akan membuat tag vue-router jika saya memiliki reputasi untuk melakukan itu
Yerko Palma

2
poin bagus! Saya pergi ke depan dan membuat vue-routertag dan menambahkannya.
Jeff

Masalahnya adalah bahwa dokumentasi vue menganggap komponen kopling ke router tidak diinginkan. Mereka merekomendasikan untuk melewatkan alat peraga, tetapi sepertinya tidak mungkin untuk melewatkan parameter permintaan secara dinamis sebagai alat peraga. Misalnya dalam penjaga sebelumnya. Setiap penjaga melakukan sesuatu seperti return next({ name: 'login', query:{param1: "foo" }, });tidak bekerja. di dalam komponen login prop param1tidak terdefinisi.
hraynaud

45

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

2
Mengapa Anda harus berpisah location.hrefsaat location.searchtersedia? developer.mozilla.org/en-US/docs/Web/API/... misalnya var querypairs = window.location.search.substr(1).split('&');Memisahkan pasangan nilai-nama kueri dengan '=' tidak akan selalu berfungsi karena Anda dapat memberikan parameter kueri yang dinamai tanpa nilai juga; mis ?par1=15&par2. Kode Anda sekarang akan memunculkan eksepsi pada par2 karena pemisahan dengan '=' akan menghasilkan tmp dengan hanya 1 elemen.
Arthur

1
Maaf tidak akan melempar pengecualian tetapi Anda juga tidak akan menangkap par2. Seperti pada dasarnya Anda menetapkan undefinedke getVars['par2'].
Arthur

metode GET adalah string (pasangan nama / nilai), dalam URL
erajuan

@Arthur Anda benar, saya menambahkan validasi dan saya menambahkan solusi lain. terima kasih
erajuan

37

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

7
Tolong jelaskan itu
Muhammad Muazzam

Pertama-tama tentukan objek router Anda, pilih mode yang menurut Anda cocok. 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 saya akan menghibur log hanya parameter yang dilewatkan di url. (* Mounted mirip dengan document.ready, .yaitu dipanggil segera setelah aplikasi siap)
Sabyasachi

3
Untuk pemula yang tidak mengerti: VueRouter tidak termasuk dalam inti VueJS, jadi Anda mungkin ingin memasukkan VueRouter secara terpisah:<script src="https://unpkg.com/vue-router"></script>
rustyx

2
@Sabyasachi Edit jawaban Anda dan tambahkan informasi itu di dalam pos itu sendiri.
Simon Forsberg

1
new Vue({ router, ... })bukan sintaks yang valid.
Crescent Fresh

17

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


Ini bagus. Bagian yang hilang dari teka-teki adalah inisiasi. Anda dapat melakukannya seperti ini: `this. $ Router.push ({name: 'mypage', permintaan: {foo: 'bar'})`
slf

7

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

this.$route.params.yourProperty

dari pada

this.$route.query.yourProperty

3
Mereka bukan hal yang sama! Anda harus menggunakan queryuntuk mendapatkan kueri dari URL. Dari dokumen: Selain $ route.params, objek $ route juga memaparkan informasi berguna lainnya seperti $ route.query (jika ada kueri di URL)
hatef

Terima kasih atas klarifikasi :)
Marco

2

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


2

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

1

Anda bisa mendapatkan Dengan Menggunakan fungsi ini.

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

-7

Jika server Anda menggunakan php, Anda dapat melakukan ini:

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

Hanya bekerja.


4
Pertanyaannya adalah bagaimana melakukan sesuatu dengan Vue, bukan dengan PHP.
robertmain
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.