Introducing Vue-Router and Loading URL-Based Components Chapter 8<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>
<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>Don't forget to encapsulate all your content in one "root" element
(represented here by the wrapping <div> tags). You also need to ensure
you declare the templates before your application JavaScript is loaded.We've created a Home page template, with the id of homepage, and an About page,
containing some placeholder text from lorem ipsum, with the id of about. Create two
components in your JavaScript which reference these two templates:
const Home = {
template: '#homepage'
};const About = {
template: '#about'
};The next step is to give the router a placeholder to render the components in the view. This
is done by using a custom
control over where your content will render. It allows us to have a header and footer right
in the app view, without needing to deal with messy templates or includes the components
themselves.