Redireccionar 404 en Vue Router - 51

▶

Aquí quería resolver una pequeña situación que ocurre cuando ingresamos a una ruta que no existe. Ya tengo la solución, así que la comentaré un momento. Si venimos a la aplicación y tratamos de ingresar a cualquier ruta que no exista, por ejemplo, la raíz directamente, veremos que aparece una página en blanco. Si presionamos F2 o miramos desde aquí, te indicaré que esta ruta no hace match con ninguna porque no la tenemos definida. Esa es la razón. Lo mismo sucede si vamos a otra ruta que no exista.

Solución 1: 404 mediante componentes

Existen un par de maneras de reparar esto. Una de ellas es crear un componente específico. De manera demostrativa, estoy utilizando el componente de list category:

src/router.js

const routes = [
   {
       path: '/dashboard',
       component: Base,
       children: [
           ***
   },
   {
       path: '/:pathMatch(.*)*', 
       name: 'NotFound', 
       component: YourComponent404
   },
]

Solución 2: 404 con Redirección

Supón que el componente no existe, o mejor dicho, supón que este componente está destinado a mostrar un mensaje que diga "404" para que el cliente sepa que la página no existe. En este caso, el componente podría ser la solución. Sin embargo, no creo que sea necesario crear un componente específico para este propósito, especialmente en aplicaciones de carácter administrativo. No veo mucho sentido en mostrar una página 404. Creo que es mejor redirigir al usuario a una página válida. Para hacer esto, podemos colocar una redirección:

src/router.js

const routes = [
   {
       path: '/dashboard',
       component: Base,
       children: [
           ***
   },
   {
       path: '/:pathMatch(.*)*', 
       name: 'NotFound', 
       redirect: '/dashboard/movie'
   },
]

Explicación de la Redirección

Voy a explicarte un poquito la línea de redirección. Lo importante aquí es que cuando se coloca una ruta que no existe, por ejemplo, la raíz, en lugar de mostrar una página en blanco o un mensaje de "404", la aplicación redirige automáticamente a una ruta válida. Si, por ejemplo, colocamos la raíz, como era justo lo que quería demostrar, cuando se lance esta aplicación a producción, usualmente colocamos el dominio, que en este caso sería localhost:5173. Pero en producción, supongamos que el dominio es vuecodig.com. Si colocas una ruta que no existe, te redirigiría automáticamente a la página de destino, en lugar de mostrar una página 404 por defecto, como sucedía antes.