Introducing Vue-Router and Loading URL-Based Components Chapter 8};
const AboutFood = {
template: `<div>
<h2>Food</h2>
<p>I really like chocolate, sweets and apples.</p>
</div>`
};The next step is to create the placeholder in your #about template for the nested routes to
render in. The element is exactly the same as one we've seen before—the
element. To demonstrate that this can be placed anywhere, add it between two paragraphs
in your template:
<script type="text/x-template" id="about">
<div>
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed
metus magna. Vivamus eget est nisi. Phasellus vitae nisi sagittis, ornare
dui quis, pharetra leo. Nullam eget tellus velit. Sed tempor lorem augue,
vitae luctus urna ultricies nec. Curabitur luctus sapien elit, non pretium
ante sagittis blandit. Nulla egestas nunc sit amet tellus rhoncus, a
ultrices nisl varius. Nam scelerisque lacus id justo congue maximus. Etiam
rhoncus, libero at facilisis gravida, nibh nisi venenatis ante, sit amet
viverra justo urna vel neque.</p><router-view></router-view><p>Curabitur et arcu fermentum, viverra lorem ut, pulvinar arcu. Fusce
ex massa, vehicula id eros vel, feugiat commodo leo. Etiam in sem rutrum,
porttitor velit in, sollicitudin tortor. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Donec ac sapien efficitur, pretium massa at,
vehicula ligula. Vestibulum turpis quam, feugiat sed orci id, eleifend
pretium urna. Nullam faucibus arcu eget odio venenatis ornare.</p>
</div>
</script>Viewing the About page in the browser won't render anything, nor will it break the app.
The next step is to add the nested routes for these components to the router. Rather than
adding them to the top level routes array, we create an array inside the /about
route—with the key of children. The syntax of this array is an exact replica of the main
array—that is, an array of route objects.