Aprender Vuejs Navegación y enrutamiento

Uno de los aspectos fundamentales en la creación de aplicaciones web es la gestión de la navegación y el enrutamiento. En este módulo, exploramos cómo manejar estas tareas usando Vue Router, la solución oficial de enrutamiento para Vue.

Instalación de Vue Router

Para empezar, necesitas instalar Vue Router en tu proyecto Vue. Puedes hacerlo utilizando npm o yarn:

npm install vue-router@4
## o
yarn add vue-router@4

Configuración básica

Después de instalar Vue Router, lo siguiente es configurarlo. Crea un archivo router.js en tu directorio src:

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

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

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

export default router;

En tu archivo principal main.js, necesitas importar y usar el router:

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

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

Definición de rutas dinámicas

Las rutas dinámicas permiten definir URLs que contienen variables. Esto es útil para páginas de detalles, como perfiles de usuario o artículos de blog. Aquí tienes un ejemplo de cómo definir una ruta dinámica:

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

En el componente User.vue, puedes acceder al parámetro de la ruta usando el composable useRoute():

<template>
  <div>
    <h1>Usuario {{ route.params.id }}</h1>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

Navegación programática

Vue Router permite la navegación programática, es decir, cambiar la ruta desde el código JavaScript. Esto se logra usando el composable useRouter() y su método push:

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

function goToUser(id: number) {
  router.push(`/user/${id}`)
}
</script>

Rutas anidadas

Las rutas anidadas permiten crear estructuras de navegación más complejas, como un tablero con diferentes secciones. Aquí tienes un ejemplo de cómo definir rutas anidadas:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
];

En el componente Dashboard.vue, usa <router-view> para renderizar las rutas hijas:

<template>
  <div>
    <h1>Dashboard</h1>
    <router-view></router-view>
  </div>
</template>

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

Guardias de navegación

Las guardias de navegación son funciones que se ejecutan antes de cambiar de ruta. Son útiles para verificar permisos o realizar redirecciones. Aquí tienes un ejemplo de una guardia global:

router.beforeEach((to, from, next) => {
  if (to.path === '/protected' && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

Estas son algunas de las funcionalidades básicas y avanzadas que ofrece Vue Router. Con una correcta gestión de la navegación y el enrutamiento, puedes crear aplicaciones web sofisticadas y fáciles de mantener.