Defaults and error pages

With our application now securely communicating to the backend and routing correctly based on authorization, we are almost finished with our core functional requirements.

There’s one final scenario that may arise for our users – the dreaded 404 – the page not found error! Thankfully, Vue Router makes it easy to create a wildcarded “catch-all” route that will be set to redirect users to a specific page if they navigate to somewhere that doesn’t exist.

As you know, in Vue, all routes are defined by creating rules on the specific URL path. So, for example, creating a route for a path of /user would be caught if the user entered packt.com/user, but it wouldn’t if the user entered packt.com/my-user or any other word that is not precisely the one set in the path rule.

To define our catch-all rule in version 4 of the Vue routervue-router 4, we will use the following route entry:

{ path: '/:pathMatch...