Bagaimana untuk mendapatkan parameter URL dalam Vue tanpa penghalaan

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue, sebagai salah satu rangka kerja bahagian hadapan yang lebih popular, telah digunakan secara meluas dalam industri. Dalam Vue, mendapatkan parameter URL melalui penghalaan adalah keperluan biasa, dan ia juga merupakan masalah biasa yang dihadapi dalam pembangunan harian. Walau bagaimanapun, kadangkala kami tidak mahu mendapatkan parameter URL melalui penghalaan, mungkin disebabkan oleh beberapa keperluan perniagaan khas. Artikel ini akan memperkenalkan cara Vue mendapatkan parameter URL tanpa penghalaan.

Pertama, mari kita fahami cara penghalaan memperoleh parameter URL. Dalam Vue, kita boleh mendapatkan parameter URL melalui ini.$route.query. Sebagai contoh, jika parameter dalam URL ialah ?id=1, ia boleh diperoleh dengan cara berikut:

this.$route.query.id  // 1

Tetapi dalam beberapa kes, kami mungkin tidak mahu mendapatkan parameter URL melalui penghalaan, mungkin disebabkan oleh beberapa logik Perniagaan yang kompleks atau penyelesaian reka bentuk, dsb. Dalam kes ini, kita boleh mendapatkan parameter URL melalui objek tetingkap.

Berikut ialah contoh mudah, dengan mengandaikan URL kami ialah http://localhost:8080?id=1.

Pertama, kita perlu menggunakan kod JavaScript asli untuk mendapatkan URL. Kodnya adalah seperti berikut:

let url = window.location.search

Dalam kod di atas, window.location.search boleh mendapatkan parameter URL, termasuk aksara khas seperti "?"

Seterusnya, kita perlu memintas nilai parameter dalam URL. Kodnya adalah seperti berikut:

let params = {}
if (url.indexOf('?') !== -1) {
    let arr = url.split('?')[1].split('&')
    arr.forEach((item) => {
        let val = item.split('=')
        params[val[0]] = val[1]
    })
}

Dalam kod di atas, kami mula-mula menggunakan pernyataan if untuk menentukan sama ada URL mengandungi aksara "?" Jika disertakan, gunakan kaedah pisah untuk memisahkan bahagian parameter dan gunakan kaedah gelung dan pisah untuk memisahkan setiap pasangan nilai kunci. Akhir sekali, kami menyimpan nama parameter dan nilai parameter dalam objek dalam bentuk pasangan nilai kunci.

Akhir sekali, kita boleh menggunakan objek params untuk mendapatkan nilai parameter URL. Sebagai contoh, untuk URL di atas, kita boleh mendapatkan nilai parameter dengan cara berikut:

params.id  // 1

Ringkasnya, kita boleh mendapatkan parameter URL melalui objek tetingkap tanpa menggunakan penghalaan. Sudah tentu, pendekatan yang hendak digunakan bergantung pada keperluan perniagaan khusus anda dan pilihan reka bentuk.

Ringkasnya, Vue ialah rangka kerja bahagian hadapan yang sangat popular Dalam proses pembelajaran Vue, anda pasti akan menghadapi keperluan untuk mendapatkan parameter URL. Melalui dua kaedah yang diperkenalkan dalam artikel ini, anda akan menguasai kemahiran mendapatkan parameter URL tanpa penghalaan dan mengatasi keperluan perniagaan yang kompleks dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan parameter URL dalam Vue tanpa penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!