Pengenalan terperinci kepada kaedah menetapkan parameter penghalaan Vue

Vue ialah rangka kerja JavaScript progresif dengan paparan dipacu data dan berkomponen sebagai terasnya. Vue Router ialah pengurus penghalaan rasmi untuk Vue.js. Ia membolehkan kami mencari keadaan aplikasi melalui laluan dan memberikan komponen yang sesuai apabila diminta oleh pengguna.

Dalam penghalaan Vue, kami boleh menentukan laluan dinamik, yang mengandungi ruang letak dengan parameter. Sebagai contoh, kita boleh membuat laluan dinamik untuk butiran pengguna, yang mengandungi parameter untuk dipadankan dengan ID pengguna. Parameter ini boleh diperolehi dalam komponen melalui objek $route.

Jadi, bagaimana untuk menetapkan parameter dalam penghalaan Vue? Artikel ini akan memperkenalkan secara terperinci cara menetapkan parameter penghalaan Vue supaya anda boleh menggunakan Penghala Vue dengan lebih baik.

1. Tetapan parameter asas

Dalam penghalaan Vue, kami boleh menetapkan parameter penghalaan dengan cara berikut:

{
  path: '/user/:id',
  component: User
}

Dalam contoh di atas, Kami tentukan laluan "/user/:id", dengan ":id" mewakili nama parameter. Sebagai contoh, apabila mengakses "/user/123", nilai parameter "id" akan menjadi "123".

Mengakses parameter ini dalam komponen adalah sangat mudah, hanya gunakan atribut params objek $route:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  }
}

Dalam komponen, kita boleh menggunakan atribut props untuk lulus " id" parameter Ikat pada komponen. Dalam komponen, kita boleh mengakses nilai parameter "id" melalui ini.$route.params.id.

2. Tetapan parameter pilihan

Selain parameter asas, kami juga boleh mentakrifkan parameter pilihan dalam penghalaan Vue. Dalam kes ini, nama parameter diikuti dengan tanda soal "?"

{
  path: '/user/:id?',
  component: User
}

Dalam contoh di atas, ":id?" bermakna parameter "id" adalah pilihan. Kami tidak mendapat padanan laluan yang salah apabila mengakses laluan "/user".

Dalam komponen, kita boleh menggunakan atribut pertanyaan bagi objek $route untuk mengakses nilai parameter pilihan. Contohnya:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id || this.$route.query.id
  }
}

Dalam contoh di atas, kami menggunakan sintaks ES6 untuk memberikan nilai lalai. Jika parameter "id" tidak disediakan dalam URL, kami menggunakan atribut pertanyaan untuk mendapatkannya.

3. Tetapan parameter bernama

Selain parameter asas dan parameter pilihan, kami juga boleh menggunakan parameter bernama untuk memindahkan parameter antara laluan dengan selamat. Menggunakan parameter yang dinamakan, kami boleh mewakili parameter yang dihantar ke laluan dengan lebih jelas.

Kita boleh menggunakan atribut "nama" dalam definisi laluan untuk menentukan nama laluan. Contohnya:

{
  path: '/user/:id',
  component: User,
  name: 'user'
}

Dalam contoh di atas, kami menetapkan nama laluan sebagai "pengguna" menggunakan atribut "nama".

Dalam komponen, kita boleh mengakses parameter nama ini melalui objek "$router" dan "$route" khusus. Contohnya:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  },
  methods: {
    goBack () {
      this.$router.push({ name: 'user', params: { id: this.id } })
    }
  }
}

Dalam contoh di atas, kami menggunakan parameter nama untuk mentakrifkan laluan dan menggunakan nama laluan dalam kaedah "goBack" untuk mengembalikan laluan.

Dalam penghalaan Vue, tetapan parameter adalah sangat penting. Parameter asas, parameter pilihan dan parameter bernama ditetapkan dalam cara yang berbeza, jadi kita perlu memahami kaedah yang berbeza ini. Setelah anda tahu cara menetapkan parameter ini, saya harap artikel ini dapat membantu anda menggunakan Penghala Vue dengan lebih baik.

Atas ialah kandungan terperinci Pengenalan terperinci kepada kaedah menetapkan parameter penghalaan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!