VUE - de Cero a Profesional

Enrutamiento y Navegación

Configuración de Vue Router

Vue Router es la biblioteca oficial de enrutamiento para Vue.js, que permite la navegación entre diferentes vistas o componentes en una aplicación de una sola página (SPA).

Instalación de Vue Router

Primero, necesitamos instalar Vue Router en nuestro proyecto Vue.js. Puedes hacerlo ejecutando el siguiente comando:

				
					npm install vue-router@next

Configuración Básica de Vue Router

A continuación, configuramos Vue Router en nuestro proyecto:

Código de Ejemplo

				
					// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

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

export default router;

				
			
				
					// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Importamos el router

const app = createApp(App);
app.use(router); // Usamos Vue Router en nuestra aplicación
app.mount('#app');

				
			
				
					<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> <!-- Enlace a Home -->
      <router-link to="/about">About</router-link> <!-- Enlace a About -->
    </nav>
    <router-view></router-view> <!-- Aquí se renderizarán las vistas -->
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* Estilos para la aplicación */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
nav {
  margin-bottom: 30px;
}
nav a {
  margin: 0 15px;
  color: #42b983;
  text-decoration: none;
}
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>

				
			
				
					<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>Bienvenido a la página principal.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

				
			
				
					<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>Esta es la página About.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

Explicación

Definición de Rutas

En el archivo router.js, importamos createRouter y createWebHistory de vue-router. Definimos las rutas de nuestra aplicación en un array routes, donde cada ruta está asociada a un componente. Luego, creamos una instancia de router utilizando createRouter, especificando el historial de navegación y las rutas definidas.

Integración del Router en la Aplicación

En el archivo main.js, importamos el router y lo integramos con nuestra aplicación Vue usando app.use(router). Luego montamos la aplicación en el elemento con el id app.

Uso de router-link y router-view

En el archivo App.vue, usamos router-link para crear enlaces de navegación y router-view para renderizar las vistas asociadas a las rutas.

  • router-link: Se utiliza para crear enlaces de navegación. La prop to especifica la ruta a la que el enlace debe navegar.
  • router-view: Es un componente que actúa como un contenedor para las vistas. Renderiza el componente correspondiente a la ruta actual.

Componentes de Vista

Creamos dos componentes de vista simples, Home.vue y About.vue, que contienen el contenido que queremos mostrar cuando se navega a sus respectivas rutas.

Resumen

  • Instalación de Vue Router: Se instala usando npm install vue-router@next.
  • Definición de Rutas: Las rutas se definen en un array y se registran en una instancia de createRouter.
  • Integración del Router: Se integra el router con la aplicación Vue en el archivo main.js.
  • Uso de router-link y router-view: router-link crea enlaces de navegación y router-view renderiza las vistas correspondientes a las rutas.
  • Componentes de Vista: Se crean componentes para cada ruta, como Home.vue y About.vue.

Recursos