Redirección de Vue-router en la página no encontrada (404)

Este equipo de especialistas luego de ciertos días de trabajo y de juntar de información, obtuvieron la respuesta, nuestro deseo es que todo este artículo sea de utilidad en tu proyecto.

Solución:

Creo que debería poder usar un controlador de ruta predeterminado y redirigir desde allí a una página fuera de la aplicación, como se detalla a continuación:

const ROUTER_INSTANCE = new VueRouter(
    mode: "history",
    routes: [
         path: "/", component: HomeComponent ,
        // ... other routes ...
        // and finally the default route, when none of the above matches:
         path: "*", component: PageNotFound 
    ]
)

en lo anterior PageNotFound definición del componente, puede especificar la redirección real, que lo sacará de la aplicación por completo:

Vue.component("page-not-found", 
    template: "",
    created: function() 
        // Redirect outside the app using plain old javascript
        window.location.href = "/my-new-404-page.html";
    

Puedes hacerlo ya sea en created gancho como se muestra arriba, o mounted anzuelo también.

Tenga en cuenta:

1. No he verificado lo anterior. Debe crear una versión de producción de la aplicación, asegúrese de que se produzca la redirección anterior. No puedes probar esto en vue-cli ya que requiere manejo del lado del servidor.

2. Por lo general, en las aplicaciones de una sola página, el servidor envía el mismo index.html junto con los scripts de la aplicación para todas las solicitudes de ruta, especialmente si ha configurado . Esto fallará para su /404-page.html a menos que su servidor lo trate como un caso especial y entregue el static página.

¡Déjame saber si funciona!

Actualización para Vue 3 en adelante:

Tendrá que reemplazar el '*' propiedad de ruta con '/:pathMatch(.*)*' si está utilizando Vue 3 como la antigua ruta general de '*' ya no es compatible. La ruta se vería así:

 path: '/:pathMatch(.*)*', component: PathNotFound ,

Consulte los documentos para obtener más información sobre esta actualización.

La respuesta de @mani ahora está un poco desactualizada ya que usa catch-all '*' Las rutas ya no son compatibles cuando se usa Vue 3 en adelante. Si esto ya no funciona para usted, intente reemplazar la antigua ruta catch-all con

 path: '/:pathMatch(.*)*', component: PathNotFound ,

Esencialmente, debería poder reemplazar el '*' camino con '/:pathMatch(.*)*' y ser bueno para ir!

Razón: Vue Router no utiliza path-to-regexp más, en cambio, implementa su propio sistema de análisis que permite la clasificación de rutas y permite el enrutamiento dinámico. Dado que generalmente agregamos una sola ruta general por proyecto, no hay gran beneficio en admitir una sintaxis especial para archivos *.

(de https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes)

La respuesta original de @mani es todo lo que desea, pero si también desea leerla de manera oficial, aquí está

Referencia a la página oficial de Vue:

https://router.vuejs.org/guide/essentials/history-mode.html#advertencia

Sección de Reseñas y Valoraciones

Agradecemos que quieras sostener nuestra faena fijando un comentario o valorándolo te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador