Skip to main content
The Pokedex application uses Vue Router 4 for client-side routing. All routes use lazy loading for optimal performance.

​
Router Configuration

The router is configured in src/router/index.js:
src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/HomeView.vue'), 
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/pokemons',
      name: 'pokemons',
      component: () => import('../views/PokemonsView.vue'),
    },
    {
      path: '/favoritos',
      name: 'favoritos',
      component: () => import('../views/FavoritosView.vue'),
    },
    {
      path: '/pokemons/:nombre',
      name: 'poke',
      component: () => import('../views/PokeView.vue'),
    },
    {
      path: '/pokemons/PokeNotFound',
      name: 'PokeNotFound',
      component: () => import('../views/PokeNotFountView.vue'),
    },
    {
      path: '/pokemons/ability/:habilidad',
      name: 'habilidad',
      component: () => import('../views/HabilidadView.vue'),
    },
    {
      path: '/:pathMatch(.*)*',
      name: "NotFound",
      component: () => import("../views/NotFoundView.vue"),
    },
  ],
})

export default router

​
Route Definitions

Name: homeComponent: HomeView.vueLanding page of the application.
Name: aboutComponent: AboutView.vueInformation about the application.
Name: pokemonsComponent: PokemonsView.vueMain Pokedex view with searchable, paginated Pokemon list.
Name: favoritosComponent: FavoritosView.vueDisplay user’s favorite Pokemon from the Pinia store.
Name: pokeComponent: PokeView.vueDynamic Parameter: :nombre - Pokemon nameDisplays detailed information for a specific Pokemon including stats, abilities, and moves.Example: /pokemons/pikachu
Name: PokeNotFoundComponent: PokeNotFountView.vueError page when a Pokemon cannot be found.
Name: habilidadComponent: HabilidadView.vueDynamic Parameter: :habilidad - Ability nameShows all Pokemon with a specific ability.Example: /pokemons/ability/overgrow
Name: NotFoundComponent: NotFoundView.vuePattern: :pathMatch(.*)*Catch-all route for undefined paths.

​
Lazy Loading

All routes use dynamic imports for code splitting: 
component: () => import('../views/HomeView.vue')

Benefits

  • Faster initial load - Only the required route code is loaded
  • Smaller bundles - Each route generates a separate chunk
  • Better performance - Routes are loaded on-demand when visited
The application uses Vue Router’s composition API and component features: 
<template>
  <RouterLink to="/pokemons" class="back-link">
    ← Volver a la Pokédex
  </RouterLink>
</template>
src/views/PokemonsView.vue
<router-link 
  v-for="poke in filteredPokemons" 
  :key="poke.name"
  :to="`/pokemons/${poke.name}`"
  class="pokemon-card"
>
  <!-- Pokemon card content -->
</router-link>

​
Accessing Route Parameters

src/views/PokeView.vue
<script setup>
import { useRoute } from 'vue-router'
import { useGetData } from '@/composables/useGetData'

const route = useRoute()
const { getData, datos, error, cargando } = useGetData()

// Access the :nombre parameter
getData(`https://pokeapi.co/api/v2/pokemon/${route.params.nombre}`)
</script>

​
Programmatic Navigation

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToPokemons = () => {
  router.push('/pokemons')
}

const goToPokemon = (name) => {
  router.push({ name: 'poke', params: { nombre: name } })
}
</script>

​
History Mode

The router uses HTML5 History mode: 
history: createWebHistory(import.meta.env.BASE_URL)

History Mode

  • Clean URLs without hash (#)
  • Uses browser’s History API
  • Requires server configuration for SPA fallback
  • Better SEO compared to hash mode

​
Route Examples

RouteDescriptionExample
/Home pageN/A
/pokemonsPokemon listN/A
/pokemons/:nombrePokemon detail/pokemons/charizard
/pokemons/ability/:habilidadPokemon by ability/pokemons/ability/blaze
/favoritosFavoritesN/A
/*404 error/invalid-path

​
Best Practices

Named routes are more maintainable than path strings:
// Good
router.push({ name: 'poke', params: { nombre: 'pikachu' } })

// Avoid
router.push('/pokemons/pikachu')
Always validate dynamic parameters before using them:
const route = useRoute()
if (!route.params.nombre) {
  router.push({ name: 'PokeNotFound' })
}
Show loading indicators when fetching route data:
<div v-if="cargando" class="loading">
  <div class="spinner"></div>
  <p>Cargando Pokémon...</p>
</div>

​
Next Steps

State Management

Learn about Pinia stores for global state

Composables

Explore reusable composition functions

Build docs developers (and LLMs) love

Get started for freeTalk to us