Bagaimana untuk mendapatkan parameter laluan lompat dalam vue

Apabila membuat penghalaan dalam Vue, anda selalunya perlu lulus parameter. Jadi bagaimana untuk mendapatkan parameter lulus dalam halaman sasaran? Artikel ini akan memperkenalkan cara mendapatkan parameter laluan lompat dalam Vue.

Terdapat dua cara untuk melompat laluan dalam Vue: gunakan pemalam vue-router atau gunakan window.location.href terus dalam halaman untuk melompat. Sama ada cara, kaedah mendapatkan parameter laluan lompat adalah serupa.

Gunakan pemalam penghalaan vue untuk lompat penghalaan

penghala vue ialah pemalam penghalaan rasmi yang disediakan oleh Vue, yang boleh membantu kami mengawal penghalaan dalam Vue. Dalam vue-router, maklumat laluan semasa, termasuk parameter laluan lompat, boleh diperolehi melalui objek $route.

Andaikan kita mempunyai konfigurasi penghalaan seperti berikut:

{
  path: '/detail/:id',
  component: Detail
}

:id di sini menunjukkan bahawa ini ialah parameter laluan yang boleh dilalui melalui laluan Contohnya, /detail/123 bermakna bahawa id adalah halaman butiran 123.

Dalam Butiran halaman sasaran, kita boleh mendapatkan parameter yang diluluskan melalui $route.params. Kodnya adalah seperti berikut:

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Dalam cangkuk yang dipasang, anda boleh mendapatkan parameter id yang diluluskan dalam laluan lompat melalui ini.$route.params.id.

Gunakan window.location.href terus dalam halaman untuk lompatan laluan

Dalam Vue, kami juga boleh menggunakan window.location.href terus untuk lompat halaman. Contohnya:

window.location.href = '/detail?id=123';

Di sini kita sambungkan parameter id ke dalam URL yang diubah hala Mari lihat cara mendapatkan parameter ini dalam halaman sasaran.

Kami boleh menggunakan location.search untuk mendapatkan bahagian parameter selepas tanda soal dalam laluan lompat, dan kemudian gunakan padanan biasa untuk mendapatkan nilai parameter yang kami perlukan. Kodnya adalah seperti berikut:

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 获取跳转路径参数字符串，去掉问号
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
    const id = query.match(reg)[2]; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

Kod di atas sepadan dengan nilai parameter id melalui ungkapan biasa dan menyimpannya dalam id pembolehubah.

Ringkasan

Kaedah untuk mendapatkan parameter laluan lompat dalam Vue adalah sangat mudah sama ada kami menggunakan pemalam vue-router atau terus menggunakan window.location.href untuk melompat, kami boleh bergantung. pada $ laluan atau objek lokasi untuk mendapatkan parameter yang diluluskan. Artikel ini memperkenalkan dua kaedah Pembangun boleh memilih kaedah yang sesuai dengan mereka mengikut situasi sebenar.

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