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:
Note the two <Anonymous> components in the stack.
By adding names to our components, we can easily identify where the problem lies. Names have been added to both the About and AboutFood components in the following example:
You can easily see the error is in the <AboutFood> component.
Adding a name to a component is as simple as adding a key of name to your object, with the name as the...
