http-status-code-404 - significa - ¿cómo se soluciona el error 404?

Redireccionamiento del enrutador Vue en la página no encontrada(404)

Question

Estoy tratando de redirigir a 404.html en la página que no se encuentra usando el router.beforeEach global, sin mucho éxito (usando Vue y Vue-Router 1.0):

router.beforeEach(function (transition) {
    if (transition.to.path === ''/*'') {
        window.location.href = ''/404.html''
    } else {
        transition.next()
    }
});

Esto no está redirigiendo a la página 404.html cuando se inserta una ruta no existente, solo me da un fragmento vacío. Solo cuando la codificación permanente de some-site.com/* se redirija al some-site.com/404.html esperado

Estoy seguro de que hay algo muy obvio aquí que estoy pasando por alto, pero no puedo entender qué.

Tenga en cuenta que lo que estoy buscando es un redireccionamiento a una nueva página, no un redireccionamiento a otra ruta , lo que podría lograrse fácilmente usando router.redirect como en estos fragmentos de router.redirect :

router.redirect({
    ''*'': ''404''
})

Mientras que en mi router.map , podría tener lo siguiente:

 router.map({
    ''/404'': {
        name: ''404''
        component: {
            template: ''<p>Page Not Found</p>''
        }
    }
})

Answer 1

Creo que deberías 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 la definición de componente de PageNotFound anterior, 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";
    }
}

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

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 ocurra el redireccionamiento anterior. No puede probar esto en vue-cli ya que requiere el 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 <base href="/"> . Esto fallará para su /404-page.html menos que su servidor lo trate como un caso especial y sirva la página estática.

¡Déjame saber si funciona!

Answer 2

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#caveat