Rumah > hujung hadapan web > View.js > teks badan

Apakah yang dimaksudkan dengan penghalaan dinamik vue?

WBOY
Lepaskan: 2022-03-16 10:14:09
asal
10963 orang telah melayarinya

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.

Apakah yang dimaksudkan dengan penghalaan dinamik vue?

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}]
Salin selepas log masuk

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:
Apakah yang dimaksudkan dengan penghalaan dinamik vue?
Kedua, anda boleh menggunakan objek, seperti:
Apakah yang dimaksudkan dengan penghalaan dinamik vue?
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   }})
Salin selepas log masuk

Parameter dihantar dalam kaedah params Alamat url yang sepadan selepas parameter diluluskan adalah seperti berikut:
Apakah yang dimaksudkan dengan penghalaan dinamik vue?
Cara mendapatkan parameter:
$router.params Contohnya, jika anda ingin mendapatkan nilai id dalam contoh ini, kod yang sepadan ialah:

$route.params.id
Salin selepas log masuk
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}]
Salin selepas log masuk

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>
Salin selepas log masuk

(2), gunakan kaedah $router untuk melompat laluan

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

laluan parameter kaedah pertanyaan, sepadan dengan alamat url selepas lulus parameter Dipaparkan sebagai:
Apakah yang dimaksudkan dengan penghalaan dinamik vue?
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
Salin selepas log masuk

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!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan