Página 404 — Página no encontrada

Vista

La página 404 se muestra cuando el visitante escribe una dirección que no existe en la aplicación (por ejemplo, /hola). En lugar de una pantalla en blanco, aparecen:

• Goxín, la mascota del restaurante.
• El mensaje "Página no encontrada".
• Dos botones para salir: "Volver al inicio" y "Ver la carta".

Se muestra dentro del diseño general de la web, con cabecera y pie.

Responsables y tareas

Responsable: Gema Miguel

Tarea Jira	Descripción	Estado
GC-280	Front: página 404 para rutas que no existen	Listo

Capturas

Entidades involucradas

Archivo	Tipo	Función
src/Views/NotFound/NotFoundView.vue	Vista	Página 404 con Goxín, mensaje y botones
src/router/index.js	Router	Ruta catch-all que lleva a la página 404
src/assets/images/branding/goxiin.png	Imagen	Goxín, la mascota del restaurante

Endpoints que consume

Ninguno. Es una página estática del front.

Cómo probarlo

1. Arranca el front (npm run dev). No hace falta el back.
2. Abre una dirección inventada, por ejemplo http://localhost:5173/hola o http://localhost:5173/carta/inventada.
3. Comprueba que:
   • Aparece la página 404 con cabecera y pie.
   • "Volver al inicio" lleva a / y "Ver la carta" lleva a /carta.
   • Las rutas que sí existen (/, /carta, /login…) siguen funcionando con normalidad.

Decisiones

• Ruta catch-all. En el router se añade la ruta :pathMatch(.*)*, que coincide con cualquier dirección:

  {
    path: ":pathMatch(.*)*",
    name: "not-found",
    component: NotFoundView,
  }

Vue Router da prioridad a las rutas más específicas, así que esta solo se usa cuando ninguna otra encaja.

• Dentro de PublicLayout. La ruta es hija de la ruta pública, así la página 404 muestra la cabecera y el pie como el resto de la web.
• Sin roles. No lleva meta.roles, así que el guardia de navegación (router.beforeEach) la deja pasar sin pedir sesión.
• Goxín como imagen decorativa. Lleva alt="" y aria-hidden="true", porque el mensaje ya está en el texto y los lectores de pantalla no necesitan describir la imagen.
• Dos salidas. Además de volver al inicio, se ofrece ir directamente a la Carta, que es la página más visitada.

Limitaciones

• Solo cubre rutas del front. Si un producto no existe en el back (por ejemplo, /product/99999), no se muestra esta página, sino el mensaje propio del detalle de producto.