Desarrollé un middleware de enrutador nuxt que llama a una API basada en el parámetro de ruta dinámica. Si la API devuelve una respuesta de error (404..., 500...), entonces muestra la página de error/diseño predeterminado nuxt. Dentro de la página de error, permitimos que el usuario redirija a la página de inicio haciendo clic en el botón redirigir a la página de inicio. El código de middleware de mi enrutador se proporciona a continuación:

 export default ({ app, store, error }) => { // Every time the route changes (fired on initialization too) app.router.beforeEach(async (to, from, next) => { if (to.params.bookName) { let params = to.params.bookName let bookName = name && name.replace(/\s+/g, "-").toLowerCase() if (bookName) { try { await store.dispatch("home/getShopDetailsByBookName", bookName) } catch (e) { error({ statusCode: e.response.status, message: "Book not found" }) } } } next() }) }

volver a la página de inicio this.$router.push("/") cuando el usuario solicita una URL con un nombre no válido y la API devuelve un código de error, inicia nuxt y muestra el diseño/error.vue . Ahora, si el usuario hace clic en el botón Volver a Inicio y vuelve a hacer clic en el botón Atrás del navegador, en lugar de mostrar los diseños/error.vue nuxt carga la página solicitada. La página de diseños/error.vue de Nuxt solo se carga cuando se actualiza la página solicitada, pero si se redirige una página usando el botón Atrás del navegador en lugar de mostrar diseños/error.vue, nuxt carga la página solicitada.