Apakah yang dimaksudkan dengan penghalaan dinamik vue?

Dalam Vue, penghalaan dinamik adalah untuk memetakan laluan yang sepadan dengan corak tertentu kepada komponen yang sama Intipati penghalaan dinamik adalah untuk menghantar parameter melalui url ia boleh dilakukan melalui cara "params" dan "pertanyaan". lulus parameter dinamik.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah yang dimaksudkan dengan penghalaan dinamik vue?

Pemahaman tentang penghalaan dinamik

Penghalaan dinamik adalah untuk memetakan laluan yang sepadan dengan corak tertentu kepada komponen yang sama Dalam hakikatnya, intipatinya adalah untuk menghantar parameter melalui url

Contohnya: terdapat komponen Barang, dan kami perlu memetakan ID produk yang berbeza kepada komponen ini Pada masa ini, penghalaan dinamik diperlukan.

Konfigurasi penghalaan dinamik

Anda boleh lulus parameter dinamik dalam dua cara:
(1), params
(2), pertanyaan

Nota: Demonstrasi kod berikut semuanya dalam mod penghalaan sejarah

Melalui parameter dalam mod params

Mengkonfigurasi penghalaan: gunakan titik bertindih: ikat parameter dinamik.

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

Apabila penghalaan melompat, ia terbahagi kepada:

(1) Gunakan kaedah pautan penghala untuk melaksanakan lompat laluan
Dengan cara ini, anda boleh menggunakan rentetan, dalam Laluan diikuti secara langsung oleh nilai yang sepadan, seperti:

Kedua, anda boleh menggunakan objek, seperti:

Nota:

• params Dalam kaedah, atribut kepada menggunakan objek, dan laluan mesti diperkenalkan oleh atribut nama, dan laluan tidak boleh digunakan.
• Apabila menghantar parameter dalam kaedah params, nama atribut mesti konsisten dengan nama parameter dinamik semasa mengkonfigurasi penghalaan, jika tidak, ralat akan dilaporkan.
  (2) Gunakan kaedah $router untuk melompat laluan

//方法1
 this.$router.push('/goods/' + this.goodsId)
 //方法2
 this.$router.push({
   name: 'goods',
   params: {
     id: this.goodsId   }})

Parameter dihantar dalam kaedah params Alamat url yang sepadan selepas parameter diluluskan adalah seperti berikut:

Cara mendapatkan parameter:
$router.params Contohnya, jika anda ingin mendapatkan nilai id dalam contoh ini, kod yang sepadan ialah:

$route.params.id

Melulus. parameter dalam mod pertanyaan

Apabila mengkonfigurasi penghalaan, cuma konfigurasikannya seperti biasa, iaitu, konfigurasikan penghalaan seperti yang anda konfigurasikan pada asalnya. Contohnya:

const routes = [{
    path: '/goods',
    name: 'goods',
    component: Goods}]

Apabila penghalaan melompat, ia dibahagikan kepada:
(1) Gunakan kaedah pautan penghala untuk melaksanakan lompatan penghalaan
Kaedah lulus parameter pertanyaan hanya boleh melalui objek dan tidak boleh digunakan. Rentetan

<router-link>商品</router-link>

(2), gunakan kaedah $router untuk melompat laluan

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

laluan parameter kaedah pertanyaan, sepadan dengan alamat url selepas lulus parameter Dipaparkan sebagai:

Nota: Apabila menghantar parameter dalam mod pertanyaan, nama atribut dalam objek pertanyaan (seperti id dalam contoh ini) boleh dinamakan sewenang-wenangnya, tidak seperti semasa menghantar parameter dalam params mod, ia adalah terhad.
Pada masa yang sama, laluan boleh diperkenalkan dengan cara ini menggunakan sama ada atribut laluan atau atribut nama.
Cara mendapatkan parameter:
$route.query Dalam contoh ini, jika anda ingin mendapatkan nilai id, kodnya ialah:

$route.query.id

Ringkasnya, pastikan anda memberi perhatian. kepada:
(1 ), penghalaan params hanya boleh diperkenalkan menggunakan nama, penghalaan pertanyaan boleh diperkenalkan menggunakan nama dan laluan.
(2). Gunakan "penghala" untuk melompat laluan; gunakan "laluan" untuk mendapatkan parameter

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah yang dimaksudkan dengan penghalaan dinamik vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!