Categories
Vue Answers

How to redirect on page not found with Vue Router?

Spread the love

Sometimes, we want to redirect on page not found with Vue Router.

In this article, we’ll look at how to redirect on page not found with Vue Router.

How to redirect on page not found with Vue Router?

To redirect on page not found with Vue Router, we can use the '*' path to match all routes that aren’t listed in the routes definition.

For instance, we write

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: HomeComponent },
    // ...
    { path: "*", component: PageNotFound },
  ],
});

to create a VueRouter instance with

{ path: "*", component: PageNotFound }

in routes to match all route paths` that aren’t listed above it.

PageNotFound is a component like any other component.

Conclusion

To redirect on page not found with Vue Router, we can use the '*' path to match all routes that aren’t listed in the routes definition.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *