When building an app or website, despite all good intentions, problems, issues, and mistakes do happen. For this reason, it's a good idea to have error pages in place. The most common page would be a 404 page—a message displayed when a link is incorrect or a page has moved. 404 is the official HTTP code for page not found.

As mentioned earlier, Vue-router will match the routes based on a first-come-first-served principle. We can use this to our advantage by using a wildcard (*) character as the last route. As the wildcard matches every route, only URLs which have not matched a previous route will be caught by this one.

Create a new component titled PageNotFound with a simple template, and add a new route which uses the wildcard character as the path:

const PageNotFound = {
  template: `<h1>404: Page Not Found</h1>`
};

const router = new...