Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Introducing Vue-Router and Loading URL-Based Components Chapter 8

Note the two 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 component.

Adding a name to a component is as simple as adding a key of name to your object, with

the name as the value. These names adhere to the same rules as to when we were creating
our HTML element components: no spaces, but hyphens and letters are allowed. To allow

me to quickly identify the code, I chose to name my component the same as the variable

defining it:

const About = {

name: 'About',

template: '#about'

};

const AboutFood = {

name: 'AboutFood',

template: `<div>

<h2>Food</h2>

<p>I really like chocolate, sweets and apples.</p>

</div>`

}

Naming routes

Another object you are able to name when using VueRouter is the route itself. This gives

you the ability to simplify a route's location and update the path, without needing to find

and replace all the instances in the app.