Panduan pemula ' s ke Vue Router

Tutorial ini menunjukkan membina aplikasi Pokedex mudah menggunakan Vue 3 dan Vue Router 4, mempamerkan konsep penghalaan utama. Kami akan meliputi penubuhan router, mengendalikan parameter laluan, navigasi deklaratif dan programatik, laluan bersarang, dan melaksanakan 404 halaman.

Konsep utama yang dilindungi:

• Vue Router Setup: Ketahui cara mengintegrasikan Router Vue ke dalam projek Vue 3 anda dan konfigurasikan laluan.
• navigasi: Terokai kedua -dua navigasi deklaratif (menggunakan :param) dan navigasi programatik (menggunakan
).
• Laluan bersarang: <router-link></router-link> Memahami cara membuat laluan bersarang untuk struktur aplikasi yang lebih kompleks. this.$router.push()
• 404 Pengendalian: Melaksanakan halaman 404 yang berdedikasi untuk mengendalikan URL yang tidak sah.
• Pengawal navigasi: diperkenalkan secara ringkas, ini membolehkan anda mengawal aliran navigasi (mis., Untuk pengesahan).
• Struktur aplikasi:

Memaparkan senarai 151 Pokémon asal.

• Pokemon: menunjukkan butiran asas (jenis, keterangan) untuk Pokémon yang dipilih. Butiran Pokemon
• Pokemon: memberikan maklumat mendalam (rantaian evolusi, kebolehan, bergerak).

Menyediakan persekitaran pembangunan:

Buat projek Vue 3 baru:

Pasang pakej yang diperlukan:

Sahkan aplikasi lalai berjalan (
1. ). vue create poke-vue-router
2. npm install vue-router@4 axios sass-loader@10.1.1 node-sass@4.14.1 --save-dev Membina aplikasi (langkah mudah):
3. 1. Konfigurasi main.js: import App.vue dan penghala.
   2. create router/index.js: Tentukan laluan menggunakan createRouter dan createWebHistory.
   3. Membangunkan komponen: Buat komponen untuk senarai Pokemon, Pokémon individu, dan pandangan Pokémon terperinci. Gunakan axios untuk mengambil data dari pokeapi.
   4. Melaksanakan navigasi: Gunakan <router-link></router-link> untuk navigasi deklaratif dan this.$router.push() untuk navigasi programatik.
   5. Tambah laluan bersarang: Laluan struktur untuk mengendalikan pelbagai parameter (mis., Nama Pokémon dan ID).
   6. Buat 404 Page: Melaksanakan laluan tangkapan untuk memaparkan halaman "tidak dijumpai" untuk URL yang tidak sah. Gunakan pengawal navigasi untuk menyemak nama Pokémon yang sah sebelum menavigasi ke halaman terperinci Pokémon.

   Eksplorasi lanjut:

   Setelah menyelesaikan tutorial ini, pertimbangkan untuk meneroka:

   • lulus prop ke komponen laluan.
   • Menambah peralihan halaman.
   • Melaksanakan pemuatan malas untuk prestasi yang lebih baik.

   Soalan Lazim (Soalan Lazim):

   Seksyen Soalan Lazim memberikan jawapan ringkas kepada soalan -soalan biasa mengenai penghala Vue, yang meliputi pemasangan, definisi laluan, parameter lulus, 404 pengendalian, dan perlindungan laluan. Soalan -soalan ini dijawab dalam konteks kandungan tutorial.

Atas ialah kandungan terperinci Panduan pemula ' s ke Vue Router. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!