En este tema, aprenderemos cómo configurar Vue Router en una aplicación Vue.js. Vue Router es la biblioteca oficial de enrutamiento para Vue.js, que permite crear aplicaciones de una sola página (SPA) con navegación entre diferentes vistas sin recargar la página.
- Instalación de Vue Router
Para comenzar, necesitamos instalar Vue Router en nuestro proyecto Vue.js. Si estás utilizando Vue CLI, puedes agregar Vue Router durante la creación del proyecto o instalarlo posteriormente.
Instalación durante la creación del proyecto
Si estás creando un nuevo proyecto con Vue CLI, puedes seleccionar la opción de agregar Vue Router:
Durante el proceso de configuración, selecciona "Router" cuando se te pregunte qué características adicionales deseas incluir.
Instalación en un proyecto existente
Si ya tienes un proyecto Vue.js y deseas agregar Vue Router, puedes instalarlo usando npm o yarn:
o
- Configuración Básica de Vue Router
Una vez que Vue Router está instalado, necesitamos configurarlo en nuestra aplicación. Sigue estos pasos:
Paso 1: Crear un archivo de configuración de rutas
Crea un archivo router/index.js en tu proyecto. Este archivo contendrá la configuración de las rutas de tu aplicación.
// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;Paso 2: Crear componentes de vista
Crea los componentes de vista que se utilizarán en las rutas. Por ejemplo, crea los archivos Home.vue y About.vue en la carpeta views:
<!-- src/views/Home.vue -->
<template>
<div>
<h1>Home</h1>
<p>Welcome to the Home page!</p>
</div>
</template>
<script>
export default {
name: 'Home'
};
</script><!-- src/views/About.vue -->
<template>
<div>
<h1>About</h1>
<p>This is the About page.</p>
</div>
</template>
<script>
export default {
name: 'About'
};
</script>Paso 3: Integrar Vue Router en la aplicación
Modifica el archivo main.js para integrar Vue Router en tu aplicación:
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');Paso 4: Agregar enlaces de navegación
Finalmente, agrega enlaces de navegación en tu componente principal App.vue para permitir la navegación entre las vistas:
<!-- src/App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
nav {
margin-bottom: 20px;
}
nav a {
margin-right: 10px;
}
</style>
- Ejercicio Práctico
Ejercicio
- Crea un nuevo componente de vista llamado
Contact.vueen la carpetaviews. - Agrega una nueva ruta para el componente
Contacten el archivorouter/index.js. - Actualiza el componente
App.vuepara incluir un enlace de navegación al componenteContact.
Solución
Paso 1: Crear el componente Contact.vue
<!-- src/views/Contact.vue -->
<template>
<div>
<h1>Contact</h1>
<p>This is the Contact page.</p>
</div>
</template>
<script>
export default {
name: 'Contact'
};
</script>Paso 2: Agregar la ruta en router/index.js
// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue'; // Importar el nuevo componente
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/contact',
name: 'Contact',
component: Contact // Agregar la nueva ruta
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;Paso 3: Actualizar App.vue
<!-- src/App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link> <!-- Agregar el nuevo enlace -->
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
nav {
margin-bottom: 20px;
}
nav a {
margin-right: 10px;
}
</style>Conclusión
En esta sección, hemos aprendido cómo instalar y configurar Vue Router en una aplicación Vue.js. Hemos cubierto la creación de rutas, la integración de Vue Router en la aplicación y la creación de componentes de vista. Además, hemos realizado un ejercicio práctico para reforzar los conceptos aprendidos. En el próximo tema, exploraremos las rutas dinámicas y cómo manejar parámetros en las rutas.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)