Vue Academy · Lección

Configuración de Vue Router

Instale Vue Router y defina sus primeras rutas

Configuración de Vue Router es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué es Vue Router?

Vue Router es la biblioteca oficial de enrutamiento para Vue.

Asocia las URL con componentes
Permite navegar en una sola página sin recargarla por completo
Gestiona el historial, los enlaces y los parámetros

Instalar Vue Router

Añada Vue Router a su proyecto con npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Crear componentes de ruta

Cada ruta representa un componente. Comience con componentes de página sencillos.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Definir el array de rutas

Un array de routes asocia las rutas con los componentes.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

La función createRouter crea un router a partir de las rutas y de un modo de historial.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory utiliza la API de historial de HTML5 para crear URL limpias, como /about.

La URL no contiene un hash
Requiere configurar el servidor para que funcionen los enlaces profundos
La alternativa es createWebHashHistory (/#/about)

Registrar el router

Instale el router en la aplicación con app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

El componente router-view es el lugar donde se representa el componente de la ruta coincidente.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Use router-link en lugar de etiquetas de anclaje normales para la navegación. Así evitará recargar la página por completo.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Estilos de enlaces activos

router-link añade automáticamente clases CSS al enlace activo.

router-link-active para coincidencias parciales
router-link-exact-active para coincidencias exactas

Aplique estilos a estas clases para resaltar la página actual.

Integrarlo todo

El flujo completo:

Defina las rutas asociando las rutas con los componentes
Cree el router con createRouter y createWebHistory
Regístrelo con app.use(router)
Coloque router-view y navegue con router-link

Comprobación rápida

Compruebe su comprensión de la configuración de Vue Router.

Resumen: configurar Vue Router

Ha configurado el enrutamiento del lado del cliente:

Instálelo con npm install vue-router
Defina un array de routes
Use createRouter con createWebHistory
Regístrelo mediante app.use(router)
Use router-view y router-link

A continuación: rutas anidadas y dinámicas.

Preguntas frecuentes

¿La lección «Configuración de Vue Router» es gratis?

Sí — el texto completo de «Configuración de Vue Router» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Configuración de Vue Router»?

Instale Vue Router y defina sus primeras rutas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Configuración de Vue Router»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy