A Beginner's Guide to Vue Router

This tutorial demonstrates building a simple Pokedex app using Vue 3 and Vue Router 4, showcasing key routing concepts. We'll cover setting up the router, handling route parameters, declarative and programmatic navigation, nested routes, and implementing a 404 page.

This tutorial assumes basic familiarity with HTML, CSS, JavaScript, and Vue.js, along with Node.js and the Vue CLI. We'll leverage Axios for API calls. The complete code is available on GitHub.

Key Concepts Covered:

• Vue Router Setup: Learn how to integrate Vue Router into your Vue 3 project and configure routes.
• Route Parameters: Master the use of dynamic route segments (:param) to pass data between components.
• Navigation: Explore both declarative navigation (using <router-link></router-link>) and programmatic navigation (using this.$router.push()).
• Nested Routes: Understand how to create nested routes for more complex application structures.
• 404 Handling: Implement a dedicated 404 page to gracefully handle invalid URLs.
• Navigation Guards: Briefly introduced, these allow you to control navigation flow (e.g., for authentication).

App Structure:

Our Pokedex app features three pages:

• Pokemon List: Displays a list of the original 151 Pokémon.
• Pokemon: Shows basic details (type, description) for a selected Pokémon.
• Pokemon Details: Provides in-depth information (evolution chain, abilities, moves).

Setting Up the Development Environment:

1. Create a new Vue 3 project: vue create poke-vue-router (select Vue 3).
2. Install necessary packages: npm install vue-router@4 axios sass-loader@10.1.1 node-sass@4.14.1 --save-dev
3. Verify the default app runs (npm run serve).

Building the App (Simplified Steps):

1. Configure main.js: Import App.vue and the router.
2. Create router/index.js: Define routes using createRouter and createWebHistory.
3. Develop Components: Create components for the Pokemon list, individual Pokémon, and detailed Pokémon views. Use Axios to fetch data from PokeAPI.
4. Implement Navigation: Utilize <router-link></router-link> for declarative navigation and this.$router.push() for programmatic navigation.
5. Add Nested Routes: Structure routes to handle multiple parameters (e.g., Pokémon name and ID).
6. Create 404 Page: Implement a catch-all route to display a "Not Found" page for invalid URLs. Use a navigation guard to check for valid Pokémon names before navigating to Pokémon detail pages.

Further Exploration:

After completing this tutorial, consider exploring:

• Passing props to route components.
• Adding page transitions.
• Implementing lazy loading for improved performance.

Frequently Asked Questions (FAQs):

The FAQs section provides concise answers to common questions about Vue Router, covering installation, route definitions, parameter passing, 404 handling, and route protection. These questions are answered within the context of the tutorial's content.

The above is the detailed content of A Beginner's Guide to Vue Router. For more information, please follow other related articles on the PHP Chinese website!