Introducing Vue-Router and Loading URL-Based Components Chapter 8{
path: '*',
component: PageNotFound
}
],linkActiveClass: 'active',
linkExactActiveClass: 'current'
});Open the app up in the browser and type anything at the end of the URL (except about)
and press Enter—you should be presented with the 404 heading.
Although this is simulating a page not found request, it is not actually
sending the correct HTTP code to the browser. If you are using a Vue web
app in production it is a good idea to set up server-side error checking, so
in the instance of an incorrect URL the browser can be correctly notified.Naming components, routes, and views
Adding names to your routes and components is not required when using Vue-router,
but is good practice to do so and a good habit to get into.
Naming components
Components with names allow you to debug your errors more easily. In Vue, when a
JavaScript error is thrown from a component, it will give you the name of that component,
rather than listing Anonymous as the component.
An example of this would be if you tried to output a variable of {{ test }} in the food
component—one that isn't available. By default, a JavaScript console error would look like
the following: