Introducing Vue-Router and Loading URL-Based Components Chapter 8Links can be created to these components from anywhere, in the same fashion that you
linked the Home and About pages. You can either add them to the about template, so they
only appear when that page has been navigated to, or add them to the main navigation in
your app view.
Creating a 404 page
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 VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About,
children: [
{
path: 'contact',
component: AboutContact
},
{
path: 'food',
component: AboutFood
}
]
},