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.

Tutorial ini menganggap kebiasaan asas dengan HTML, CSS, JavaScript, dan Vue.js, bersama dengan Node.js dan Vue CLI. Kami akan memanfaatkan AXIOS untuk panggilan API. Kod Lengkap tersedia di GitHub.

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:

aplikasi Pokedex kami mempunyai tiga halaman:

Pokemon List:

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:

(pilih Vue 3).

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!