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.
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.
Anda boleh lulus parameter dinamik dalam dua cara:
(1), params
(2), pertanyaan
Nota: Demonstrasi kod berikut semuanya dalam mod penghalaan sejarah
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:
//方法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
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!