Cara melompat dengan parameter dalam vue.js

Kaedah lompatan Vue.js dengan parameter: 1. Tentukan laluan; 2. Gunakan parameter penghalaan dalam komponen;

Dalam Vue.js, anda boleh menggunakan parameter penghalaan untuk menghantar data antara halaman yang berbeza. Ini biasanya dicapai melalui parameter serpihan dinamik laluan. Berikut ialah langkah umum tentang cara melompat dengan parameter dalam Vue.js:

1 Tentukan laluan: Mula-mula, tentukan laluan dengan parameter dalam konfigurasi penghalaan aplikasi Vue.js. Apabila menentukan laluan, anda boleh menggunakan titik bertindih (:) untuk menentukan parameter serpihan dinamik, yang akan dihantar apabila melompat ke halaman yang sepadan. Contohnya:

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

Dalam contoh di atas, kami menentukan laluan bernama "pengguna" dengan parameter bernama "id". Ini bermakna apabila pengguna mengakses "/user/xxx", "xxx" akan diserahkan kepada komponen yang sepadan sebagai parameter "id".

2 Gunakan parameter penghalaan dalam komponen: Dalam komponen yang menerima parameter, parameter penghalaan boleh diakses melalui `$route.params`. Sebagai contoh, dalam contoh di atas, parameter "id" yang diluluskan boleh diakses melalui `$route.params.id` dalam komponen Pengguna.

export default {
  created() {
    console.log(this.$route.params.id); // 输出路由参数
  }
}

3 Lompat dengan parameter: Di mana anda perlu melompat dengan parameter, anda boleh menggunakan komponen `router-link` yang disediakan oleh vue-router atau melakukan navigasi laluan terprogram.

Gunakan ``:

<router-link :to="{ path: &#39;/user/&#39; + user.id }">用户详情</router-link>

Dalam contoh di atas, apabila pengguna mengklik pautan "Butiran Pengguna", ia akan melompat ke halaman "/user/xxx", di mana "xxx" ialah ` pengguna Nilai .id`.

Navigasi penghalaan terprogram:

methods: {
  goToUserDetail(userId) {
    this.$router.push({ path: '/user/' + userId });
  }
}

Dalam contoh di atas, apabila kaedah `goToUserDetail` dipanggil, navigasi penghalaan dan parameter diluluskan.

Di atas ialah langkah umum untuk melompat dengan parameter dalam Vue.js. Dengan mentakrifkan laluan dengan parameter, mengakses parameter laluan dalam komponen dan menggunakan `` atau navigasi laluan terprogram, fungsi melompat dengan parameter boleh dilaksanakan dalam aplikasi Vue.js.

Atas ialah kandungan terperinci Cara melompat dengan parameter dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!