Bagaimana untuk mengalih keluar parameter url dalam vue

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif dan aplikasi satu halaman. Apabila membangunkan aplikasi Vue.js, anda selalunya perlu berurusan dengan parameter URL.

Dalam Vue.js, anda boleh menggunakan objek $route untuk mendapatkan maklumat tentang laluan semasa, termasuk parameter dalam URL semasa. Walau bagaimanapun, kadangkala adalah perlu untuk mengalih keluar parameter dalam URL Artikel ini akan memperkenalkan cara untuk mengalih keluar parameter URL dalam Vue.js.

Dapatkan parameter URL

Dalam Vue.js, anda boleh menggunakan objek $route untuk mendapatkan maklumat laluan semasa, termasuk parameter dalam URL. Objek $route mengandungi banyak atribut, antaranya atribut params mengandungi parameter penghalaan.

this.$route.params.id // 获取名为"id"的参数值

Contohnya, dalam laluan berikut:

path: '/users/:id'

Anda boleh menggunakan kod berikut untuk mendapatkan nilai parameter bernama "id":

this.$route.params.id // 获取名为"id"的参数值

Alih Keluar Parameter URL

Kadangkala, kita perlu mengalih keluar satu atau lebih parameter daripada URL semasa. Berikut adalah beberapa cara untuk mencapai matlamat tersebut.

Kaedah 1: Gunakan kaedah $router.replace

Anda boleh menggunakan kaedah $router.replace untuk mengalih keluar parameter dalam URL. Kaedah ini digunakan untuk menavigasi ke URL baharu dan tidak menjana rekod sejarah baharu.

this.$router.replace({ path: '/users', query: { page: null } })

Dalam kod di atas, kami menggunakan null untuk mengosongkan parameter bernama "halaman". Ini akan menavigasi ke laluan /users tanpa melepasi sebarang parameter.

Kaedah 2: Gunakan kaedah $router.push

Kaedah $router.push adalah serupa dengan kaedah $router.replace, tetapi ia akan menjana rekod sejarah baharu.

Anda boleh menggunakan kaedah $router.push untuk menjana URL baharu tanpa parameter tertentu.

this.$router.push({ path: '/users', query: { page: null } })

Dalam kod di atas, kami menggunakan null untuk mengosongkan parameter bernama "halaman". Ini akan menavigasi ke laluan /users tanpa melepasi sebarang parameter.

Kaedah 3: Gunakan kaedah $route.replace

Kaedah $route.replace digunakan untuk menavigasi ke URL baharu, tetapi ia tidak menjana rekod sejarah baharu.

this.$route.replace({ path: '/users', query: { page: null } })

Dalam kod di atas, kami menggunakan null untuk mengosongkan parameter bernama "halaman". Ini akan menavigasi ke laluan /users tanpa melepasi sebarang parameter.

Kaedah 4: Gunakan $route.query

Anda boleh menggunakan $route.query untuk mengakses parameter dalam URL semasa dan memadamkan parameter daripadanya.

const query = Object.assign({}, this.$route.query)
delete query.page
this.$router.replace({ path: '/users', query: query })

Dalam kod di atas, kami menggunakan kaedah Object.assign untuk mencipta salinan sifat $route.query. Kami kemudian menggunakan kaedah padam untuk memadam parameter bernama "halaman" dan kaedah $router.replace untuk menavigasi URL yang dikemas kini ke dalam penyemak imbas.

Kesimpulan

Dalam Vue.js, terdapat beberapa kaedah yang boleh anda gunakan untuk mengalih keluar parameter daripada URL. Kaedah ini termasuk $router.replace, $router.push, $route.replace dan $route.query. Memilih kaedah yang sesuai mengikut keperluan sebenar boleh mengendalikan parameter URL dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar parameter url dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!