Vue-router redirect on page not found 404

Question

I m trying to redirect to 404 html on page not found using the router beforeEach global hook  without much success  using Vueand Vue-Router 1 0    router beforeEach function  transition        if  transition to path                     window location href     404 html        else           transition next               This is not redirecting to page 404 html when a non-existing route is inserted  just giving me an empty fragment  Only when hard-coding some-site com   will it redirect to the expected some-site com 404 html  I m sure there s something very obvious here that I m overlooking  but I cannot figure out what     Please note that what I am looking for is a redirect to a new page  not a redirect to another route  which could be easily achieved by using router redirect such as in these snippets   router redirect             404       Whereas on my router map  I could have the following    router map         404             name   404          component                template    lt p gt Page Not Found lt  p gt

User · Answer

mani s Original answer is all you want  but if you d also like to read it in official way  here s  Reference to Vue s official page   https   router vuejs org guide essentials history-mode html caveat

User · Answer

I think you should be able to use a default route handler and redirect from there to a page outside the app  as detailed below  const ROUTER INSTANCE   new VueRouter       mode   quot history quot       routes              path   quot   quot   component  HomeComponent                   other routes                and finally the default route  when none of the above matches            path   quot   quot   component  PageNotFound             In the above PageNotFound component definition  you can specify the actual redirect  that will take you out of the app entirely  Vue component  quot page-not-found quot         template   quot  quot       created  function                Redirect outside the app using plain old javascript         window location href    quot  my-new-404-page html quot            You may do it either on created hook as shown above  or mounted hook also  Please note   I have not verified the above  You need to build a production version of app  ensure that the above redirect happens  You cannot test this in vue-cli as it requires server side handling   Usually in single page apps  server sends out the same index html along with app scripts for all route requests  especially if you have set  lt base href  quot   quot  gt   This will fail for your  404-page html unless your server treats it as a special case and serves the static page    Let me know if it works  Update for Vue 3 onward  You ll need to replace the     path property with    pathMatch       if you re using Vue 3 as the old catch-all path of     is no longer supported  The route would then look something like this    path     pathMatch        component  PathNotFound     See the docs for more info on this update

User · Answer

mani s response is now slightly outdated as using catch-all     routes is no longer supported when using Vue 3 onward  If this is no longer working for you  try replacing the old catch-all path with   path     pathMatch        component  PathNotFound     Essentially  you should be able to replace the     path with    pathMatch       and be good to go  Reason  Vue Router doesn t use path-to-regexp anymore  instead it implements its own parsing system that allows route ranking and enables dynamic routing  Since we usually add one single catch-all route per project  there is no big benefit in supporting a special syntax for     from https   next router vuejs org guide migration  removed-star-or-catch-all-routes

User · Answer

This answer may come a bit late but I have found an acceptable solution   My approach is a bit similar to  Mani one but I think mine is a bit more easy to understand  Putting it into global hook and into the component itself are not ideal  global hook checks every request so you will need to write a lot of conditions to check if it should be 404 and window location href in the component creation is too late as the request has gone into the component already and then you take it out  What I did is to have a dedicated url for 404 pages and have a path   that for everything that not found    path     locale 404   name   notFound   component       gt  import  pages Error404 vue        path     locale        beforeEnter  to        window location       to params locale  404         You can ignore the  locale as my site is using i18n so that I can make sure the 404 page is using the right language  On the side note  I want to make sure my 404 page is returning httpheader 404 status code instead of 200 when page is not found   The solution above would just send you to a 404 page but you are still getting 200 status code  To do this  I have my nginx rule to return 404 status code on location   locale 404 server       listen                      80      server name                 localhost       error page  404  index html      location        404          root    usr share nginx html        internal             location           root    usr share nginx html        index  index html index htm        try files  uri  uri   rewrites             location  rewrites         rewrite         index html last             location    50x html         root    usr share nginx html

[http-status-code-404] Vue-router redirect on page not found (404)

Reference to Vue's official page:

Examples related to http-status-code-404

Examples related to vue.js

Examples related to vue-router