how to create a 404 component in vuejs using vue-router

Question

I\'m new to vuejs and I\'m working on my first project with vue. I\'m just wondering how I will route to my 404.vue component when the requested url is not found.

An

Answer 1

After @g-wilson answer I went { path: '*', component: NotFound }. Might be useful if you don't want to make redirect.

Answer 2

For what I do is I give a class of http-found to the parent div all my component and I the mounted hook of the App.vue I check using jQuery or Javascript if there is any element with the class of http-found if not I redirect to my 404 page.

App.vue

mounted(){
   if(!$('.http-found')){
     this.$router.push('/404')
   }
}

Answer 3

There are a couple of ways to do this.

The most generic one is to check if the path matches any route before navigation and if not redirect to the Not found page.

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
    next('/notFound');
  } else {
    next();
  }
});

See JSFiddle.

Answer 4

Now in Vue 3 path: '*' will not work. we have to use regex: /:catchAll(.*)

We can use directly instead of using path: "*"

{
    // path: "*",
    path: "/:catchAll(.*)",
    name: "NotFound",
    component:NotFound,
}

or

{
    path: '/404', name: 'NotFound', component: NotFound
},
{
    path: '/:catchAll(.*)', redirect:'404'
}

I got it from here

Answer 5

In the routes declaration, I like to add this:

[
  ...  
  { path: '/404', component: NotFound },  
  { path: '*', redirect: '/404' },  
  ...  
]

Which will imply that if the user is navigated to a path which does not match any routes, it will be redirected to the "404" route, which will contain the "not found" message.

The reason I've separated it into 2 routes is so that you can also programmatically direct the user to the 404 route in such a case when some data you need does not resolve.

For instance, if you were creating a blog, you might have this route:

{ path: '/posts/:slug', component: BlogPost }

Which will resolve, even if the provided slug does not actually retrieve any blog post. To handle this, when your application determines that a post was not found, do

return this.$router.push('/404')

or

return router.push('/404')

if you are not in the context of a Vue component.

One thing to bear in mind though is that the correct way to handle a not found response isn't just to serve an error page - you should try to serve an actual HTTP 404 response to the browser. You won't need to do this if the user is already inside a single-page-application, but if the browser hits that example blog post as its initial request, the server should really return a 404 code.