Un guide pour débutant du routeur Vue

Ce didacticiel montre la création d'une application Pokedex simple à l'aide de Vue 3 et Vue Router 4, présentant des concepts de routage clés. Nous couvrirons la configuration du routeur, la gestion des paramètres d'itinéraire, la navigation déclarative et programmatique, les routes imbriquées et la mise en œuvre d'une page 404.

Ce tutoriel suppose une familiarité de base avec HTML, CSS, JavaScript et Vue.js, ainsi que Node.js et le Vue CLI. Nous tirons parti de Axios pour les appels API. Le code complet est disponible sur github.

Concepts clés couverts:

• Configuration du routeur Vue: Apprenez à intégrer le routeur Vue dans votre projet Vue 3 et à configurer les itinéraires.
• Paramètres d'itinéraire: maîtriser l'utilisation des segments de route dynamique (:param) pour transmettre des données entre les composants.
• Navigation: Explorez à la fois la navigation déclarative (en utilisant <router-link></router-link>) et la navigation programmatique (en utilisant this.$router.push()).
• Routes imbriquées: Comprendre comment créer des itinéraires imbriqués pour des structures d'application plus complexes.
• 404 Gestion: Implémentez une page 404 dédiée pour gérer gracieusement les URL non valides.
• Gardes de navigation: Brièvement introduits, ceux-ci vous permettent de contrôler le flux de navigation (par exemple, pour l'authentification).

Structure de l'application:

Notre application Pokedex comprend trois pages:

• LISTE POKEMON: Affiche une liste des 151 Pokémon originaux.
• Pokémon: Affiche les détails de base (type, description) pour un Pokémon sélectionné.
• Détails Pokémon: Fournit des informations détaillées (chaîne d'évolution, capacités, mouvements).

Configuration de l'environnement de développement:

1. Créez un nouveau projet Vue 3: vue create poke-vue-router (Sélectionnez Vue 3).
2. Installez les packages nécessaires: npm install vue-router@4 axios sass-loader@10.1.1 node-sass@4.14.1 --save-dev
3. Vérifiez que l'application par défaut exécute (npm run serve).

Construire l'application (étapes simplifiées):

1. Configurer main.js: Importer App.vue et le routeur.
2. Créer router/index.js: Définir les routes en utilisant createRouter et createWebHistory.
3. Développer des composants: Créer des composants pour la liste Pokémon, les pokémon individuels et les vues de Pokémon détaillées. Utilisez Axios pour récupérer les données de PokEapi.
4. Implémentez la navigation: Utiliser <router-link></router-link> pour la navigation déclarative et this.$router.push() pour la navigation programmatique.
5. Ajouter des routes imbriquées: Les routes de structure pour gérer plusieurs paramètres (par exemple, nom et ID Pokémon).
6. Créer 404 Page: Implémentez une route fourre-tout pour afficher une page "non trouvée" pour les URL non valides. Utilisez un garde de navigation pour vérifier les noms Pokémon valides avant de naviguer vers des pages de détail Pokémon.

Exploration plus approfondie:

Après avoir terminé ce tutoriel, envisagez d'explorer:

• Passer des accessoires pour acheminer les composants.
• Ajout de transitions de page.
• Implémentation de chargement paresseux pour des performances améliorées.

Questions fréquemment posées (FAQ):

La section FAQ fournit des réponses concises aux questions courantes sur le routeur Vue, couvrant l'installation, les définitions d'itinéraire, le passage des paramètres, la manipulation 404 et la protection des itinéraires. Ces questions sont répondues dans le contexte du contenu du tutoriel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!