Cómo manejar el enrutamiento en Vue con Vue Router

Configure un sistema de enrutamiento sólido para su aplicación Vue utilizando Vue Router.

Vue Router, el enrutador oficial de Vue, permite crear aplicaciones de página única (SPA) en Vue. Vue Router le permite asignar los componentes de su aplicación web a diferentes rutas del navegador, administrar la pila del historial de su aplicación y configurar opciones de enrutamiento avanzadas.

Comenzando con el enrutador Vue

Para comenzar con Vue Router, ejecute el siguiente comando npm (Node Package Manager) en su directorio preferido para crear su aplicación Vue:

npm create vue

Cuando se le pregunte si desea agregar Vue Router para el desarrollo de aplicaciones de una sola página, seleccione Sí.

A continuación, abra su proyecto en su editor de texto preferido. El directorio src de tu aplicación debe incluir una carpeta router.

La carpeta router alberga un archivo index.js que contiene el código JavaScript para manejar rutas en su aplicación. El archivo index.js importa dos funciones del paquete vue-router: createRouter y createWebHistory.

La función createRouter crea una nueva configuración de ruta a partir de un objeto. Este objeto contiene las claves historial y rutas y sus valores. La clave rutas es una serie de objetos que detallan la configuración de cada ruta, como se ve en la imagen de arriba.

Después de configurar sus rutas, debe exportar esta instancia de router e importarla al archivo main.js:

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

Importaste la función enrutador al archivo main.js y luego hiciste que tu aplicación Vue usara esta función de enrutador con el método use.

Luego puedes aplicar tus rutas a tu aplicación Vue estructurando un bloque de código similar al siguiente:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

El bloque de código anterior demuestra el uso de Vue Router en un componente de Vue. El fragmento de código importa dos componentes de la biblioteca vue-router: RouterLink y RouterView.

Los componentes RouterLink crean enlaces a las páginas Inicio y Acerca de en el fragmento de código anterior. El atributo a especifica la ruta a la que navega cuando hace clic en el enlace. Aquí tiene un enlace que apunta a la ruta raíz ("/") y otro enlace que apunta a la ruta "/about".

El componente representa el componente asociado con la ruta actual. Actúa como un marcador de posición donde se representará el contenido de la ruta actual. Cuando navega a una ruta diferente, el componente asociado con esa ruta se representará dentro del componente.

Agregar parámetros a las rutas de su aplicación

Vue Router le permite pasar parámetros y consultas a rutas. Los parámetros son partes dinámicas de la URL, indicadas por dos puntos ":".

Para configurar su Vue Router para que pueda capturar parámetros en las rutas de la aplicación, configure la ruta específica en su archivo index.js:

//index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/developer/:profileNumber",
      name: "developer",
      component: () => import("../views/devView.vue"),
    },
  ],
});

El bloque de código anterior muestra una instancia de enrutador con dos rutas: casa y desarrollador. La ruta del desarrollador muestra información sobre un desarrollador en particular según el número de perfil del desarrollador.

Ahora modifique su archivo App.vue para que se parezca al fragmento de código siguiente:

<!-- App.vue -->
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
const developer = ref([
  {
    name: "Chinedu",
    profile: 2110,
  },
]);
</script>
<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink :to="{ path: `/developer/${developer.profile}` }">
       Dev Profile
     </RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

El bloque de código anterior establece la variable desarrollador como un objeto reactivo con dos propiedades: nombre y perfil. Luego, el segundo componente RouterLink se dirige al componente devView. Ahora puede acceder al valor del parámetro que pasa a la URL en el bloque de plantilla o bloque de JavaScript del componente devView.

Para acceder a este valor en el bloque de plantilla del componente devView, Vue proporciona un método $route, un objeto que contiene propiedades que detallan la información de la URL. Esta información incluye ruta completa, consultas, parámetros y componentes.

A continuación se muestra un ejemplo de cómo acceder al perfil del desarrollador en particular en el componente devView con el método $route:

<!-- devView.vue -->
<template>
  <div>
    <h1>This is developer {{ $route.params.profileNumber }} about page</h1>
  </div>
</template>

El fragmento de código anterior demuestra cómo utilizar el método $route para acceder y mostrar el valor del parámetro profileNumber dentro de la plantilla del componente.

La propiedad params en el método $route contiene los parámetros que usted define en una ruta. Cuando Vue representa este componente, reemplaza el valor de $route.params.profileNumber con el valor real que pasa en la URL.

Por ejemplo, si visita /developer/123, el mensaje que se muestra es "Este es el desarrollador 123 acerca de la página".

También puede acceder a la información de la ruta en el bloque JavaScript de su componente. Por ejemplo:

<!-- devView.vue -->
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
  <div>
    <h1>This is developer {{ route.params.profileNumber }} about page</h1>
  </div>
</template>

En el bloque de código anterior, accediste al objeto $route directamente dentro de la plantilla para recuperar los parámetros de la ruta. Sin embargo, en el bloque de código actualizado, importó la función useRoute() del paquete vue-router. Asignó la función a una variable que luego utilizó en la plantilla de su componente Vue.

Con useRoute(), sigues el enfoque de la API de composición de Vue 3 aprovechando el sistema de reactividad. Esto garantiza que el componente se actualizará automáticamente cuando cambien los parámetros de la ruta.

Agregar consultas a las rutas de su aplicación

Las consultas, o cadenas de consulta, son parámetros opcionales que se agregan a la URL después del signo de interrogación "?". Por ejemplo, en la ruta "/search?name=vue", "name=vue" es una cadena de consulta donde name es la clave. y vue es el valor.

Para agregar una consulta a una ruta en Vue Router, puede usar la propiedad query del objeto to en el componente RouterLink. La propiedad query debe ser un objeto donde cada par clave-valor represente un parámetro de consulta. He aquí un ejemplo:

<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>

Después de agregar una consulta a una ruta, puede acceder a los parámetros de consulta en sus componentes de Vue. Puede hacer esto con el objeto $route o la función useRoute, similar a agregar parámetros de ruta.

A continuación se muestra un ejemplo de cómo se utiliza un parámetro de consulta en un componente:

<!-- HomeView.vue -->
<template>
  {{ $route.query.name }}
</template>

Este fragmento de código demuestra cómo acceder y representar el valor de un parámetro de consulta (nombre) desde la URL utilizando el objeto $route.query dentro de la plantilla de Vue.js. componente.

Definición de una página alternativa (404)

Vue Router le permite definir una ruta alternativa que coincidirá cuando ninguna otra ruta coincida con la URL. Esto es útil para mostrar una página "404 no encontrado".

Así es como puede definir una ruta alternativa con Vue Router:

    {
      path:'/:pathName(.*)',
      name: 'NotFound',
      component: () => import('../views/NotFoundView.vue')
    }

La parte /:pathName indica un segmento dinámico en la URL y (.*) es una expresión regular de JavaScript que coincide con cualquier carácter después del segmento dinámico. Esto permite que la ruta coincida con cualquier camino.

Cuando un usuario navega a una URL que no coincide con ninguna otra ruta, Vue representará el componente NotFoundView. Utilice este enfoque para manejar errores 404 o mostrar una página alternativa cuando no se encuentra una ruta solicitada.

Aprenda a crear animaciones en Vue

Aprendió a agregar parámetros y consultas a las rutas de su aplicación. También aprendió a definir una página alternativa para manejar errores 404. Vue Router proporciona muchas más funciones, como configurar rutas dinámicas y anidadas.