Si te encuentras con alguna parte que no comprendes puedes dejarnos un comentario y te ayudaremos rápidamente.
Solución:
En la declaración de rutas, me gusta agregar esto:
[
...
path: '/404', component: NotFound ,
path: '*', redirect: '/404' ,
...
]
Lo que implicará que si el usuario navega a una ruta que no coincide con ninguna ruta, será redirigido a la ruta “404”, que contendrá el mensaje “no encontrado”.
La razón por la que lo he separado en 2 rutas es para que también pueda dirigir al usuario mediante programación a la ruta 404 en tal caso, cuando algunos datos que necesita no se resuelven.
Por ejemplo, si estuvieras creando un blog, podrías tener esta ruta:
path: '/posts/:slug', component: BlogPost
Lo cual se resolverá, incluso si el slug provisto no recupera ninguna publicación de blog. Para manejar esto, cuando su aplicación determine que no se encontró una publicación, haga
return this.$router.push('/404')
o
return router.push('/404')
si no está en el contexto de un componente Vue.
Sin embargo, una cosa a tener en cuenta es que la forma correcta de manejar una respuesta no encontrada no es solo mostrar una página de error: debe intentar enviar una respuesta HTTP 404 real al navegador. No necesitará hacer esto si el usuario ya está dentro de una aplicación de una sola página, pero si el navegador encuentra esa publicación de blog de ejemplo como su solicitud inicial, el servidor realmente debería devolver un código 404.
Hay un par de maneras de hacer esto.
La más genérica es verificar si la ruta coincide con alguna ruta antes de la navegación y, si no, redirigir a la ruta. Extraviado página.
router.beforeEach((to, from, next) =>
if (!to.matched.length)
next('/notFound');
else
next();
);
Ver JSFiddle.
Después de la respuesta de @g-wilson fui path: '*', component: NotFound . Puede ser útil si no desea realizar una redirección.
Aquí tienes las comentarios y calificaciones
Nos encantaría que puedieras dar visibilidad a esta noticia si si solucionó tu problema.