DUKI FF

Cómo utilizar Vue Router para la navegación en aplicaciones de una sola página (SPA)

Vue Router es la biblioteca oficial de Vue.js para gestionar la navegación y enrutamiento en aplicaciones de una sola página. Permite que las aplicaciones simulen una estructura de múltiples páginas, mejorando la experiencia del usuario.

Instalación de Vue Router

Para comenzar a usar Vue Router, instálalo en tu proyecto:

npm install vue-router

Configuración básica de Vue Router

  1. Definir las rutas: Cada ruta representa una URL que muestra un componente específico.
  2. Crear el enrutador: Con el objeto de configuración de rutas, crea una instancia de Vue Router.
  3. Uso en la aplicación: Usa el enrutador en el archivo principal de Vue.
// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Inicio from './views/Inicio.vue';
import AcercaDe from './views/AcercaDe.vue';

const routes = [
  { path: '/', component: Inicio },
  { path: '/acerca', component: AcercaDe }
];

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

export default router;

Integración de Vue Router en la aplicación principal

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

createApp(App).use(router).mount('#app');

Navegación en los componentes

Para navegar entre las rutas, utiliza el componente router-link, que reemplaza el uso de etiquetas <a> para navegar sin recargar la página.

<template>
  <nav>
    <router-link to="/">Inicio</router-link>
    <router-link to="/acerca">Acerca de</router-link>
  </nav>
</template>

Vue Router es esencial en el desarrollo de aplicaciones SPA, permitiendo gestionar rutas de forma fácil y manteniendo la experiencia del usuario al no recargar la página.

Go up