Vue-router redirect on page not found (404)
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: "history", routes: [ { path: "/", component: HomeComponent }, // ... other routes ... // and finally the default route, when none of the above matches: { path: "*", 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("page-not-found", { template: "", created: function() { // Redirect outside the app using plain old javascript window.location.href = "/my-new-404-page.html"; }}
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
<base href="/">
. 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.
@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)
@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