El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Introducción a Vue Router

Siguiente ►
►

Vue Router es la biblioteca oficial de enrutamiento para Vue.js. Permite crear aplicaciones de una sola página (SPA) con múltiples vistas, donde los usuarios pueden navegar sin recargar la página. En esta lección, aprenderemos los conceptos básicos de Vue Router y cómo integrarlo en una aplicación Vue.

Contenido

  1. ¿Qué es Vue Router?
  2. Instalación de Vue Router
  3. Configuración Básica de Vue Router
  4. Definición de Rutas
  5. Navegación entre Rutas
  6. Ejemplo Práctico
  7. Ejercicio Práctico

  1. ¿Qué es Vue Router?

Vue Router es una biblioteca que permite gestionar la navegación en aplicaciones Vue.js. Proporciona una forma declarativa de definir rutas y manejar la navegación entre diferentes vistas de la aplicación.

Características Principales:

  • Declaración de Rutas: Define rutas de manera declarativa.
  • Navegación Programática: Permite la navegación mediante código.
  • Rutas Anidadas: Soporta rutas dentro de otras rutas.
  • Guardias de Navegación: Permite ejecutar lógica antes de entrar o salir de una ruta.
  • Lazy Loading: Carga componentes de manera diferida para mejorar el rendimiento.

  1. Instalación de Vue Router

Para instalar Vue Router, puedes usar npm o yarn. Asegúrate de tener Node.js y npm instalados en tu sistema.

npm install vue-router

O con yarn:

yarn add vue-router

  1. Configuración Básica de Vue Router

Después de instalar Vue Router, necesitas configurarlo en tu aplicación Vue. Aquí hay un ejemplo básico de cómo hacerlo:

Paso 1: Crear un archivo de configuración de rutas

Crea un archivo router.js en la raíz de tu proyecto o en una carpeta específica para la configuración de rutas.

// src/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

Paso 2: Integrar Vue Router en la instancia principal de Vue

Modifica tu archivo principal main.js para incluir el router.

// 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');

  1. Definición de Rutas

Las rutas se definen en un arreglo de objetos, donde cada objeto representa una ruta. Cada ruta tiene al menos dos propiedades: path y component.

Ejemplo de Definición de Rutas

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

  1. Navegación entre Rutas

Enlaces de Navegación

Para navegar entre rutas, puedes usar el componente <router-link>.

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Navegación Programática

También puedes navegar entre rutas mediante código usando el objeto router.

this.$router.push('/about');

  1. Ejemplo Práctico

Vamos a crear una pequeña aplicación con tres rutas: Home, About y Contact.

Estructura del Proyecto

src/
├── components/
│   ├── Home.vue
│   ├── About.vue
│   └── Contact.vue
├── router.js
└── main.js

Código de los Componentes

Home.vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

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

About.vue

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the About Page.</p>
  </div>
</template>

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

Contact.vue

<template>
  <div>
    <h1>Contact Page</h1>
    <p>Get in touch with us!</p>
  </div>
</template>

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

Configuración del Router

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

Integración en la Instancia Principal

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');

Plantilla Principal

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>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

  1. Ejercicio Práctico

Ejercicio

Crea una aplicación Vue con las siguientes rutas:

  • /: Página de inicio con un mensaje de bienvenida.
  • /services: Página de servicios con una lista de servicios ofrecidos.
  • /contact: Página de contacto con un formulario de contacto.

Solución

Estructura del Proyecto

src/
├── components/
│   ├── Home.vue
│   ├── Services.vue
│   └── Contact.vue
├── router.js
└── main.js

Código de los Componentes

Home.vue
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to our website!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>
Services.vue
<template>
  <div>
    <h1>Services Page</h1>
    <ul>
      <li>Service 1</li>
      <li>Service 2</li>
      <li>Service 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Services'
};
</script>
Contact.vue
<template>
  <div>
    <h1>Contact Page</h1>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

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

Configuración del Router

router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import Services from './components/Services.vue';
import Contact from './components/Contact.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/services', component: Services },
  { path: '/contact', component: Contact }
];

const router = new VueRouter({
  routes
});

export default router;

Integración en la Instancia Principal

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');

Plantilla Principal

App.vue
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/services">Services</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

Conclusión

En esta lección, hemos aprendido los conceptos básicos de Vue Router, cómo instalarlo y configurarlo, y cómo definir y navegar entre rutas. Con estos conocimientos, puedes empezar a crear aplicaciones Vue.js con múltiples vistas y una navegación fluida. En la próxima lección, profundizaremos en la configuración de Vue Router y exploraremos características más avanzadas como rutas dinámicas y anidadas.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados