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

(singke) #1
Single Page Applications Chapter 15

This contains a link to see more about the computer on sale; the next component is bound


to that page, so write it before the router code:


const ComputerDetail = { template: `
<div>
<h2>Computer Detail</h2>
<p>Pentium 120Mhz, CDs sold separately</p>
</div>
` }

Of course, don't forget to add the Vue instance:


new Vue({
router,
el: '#app'
})

When you launch the app, you should see the two router views one above the other. If you


want them side by side, you can add some CSS styles:


How it works...


When adding the components to the page, you just have to remember to


add a name to refer to it later during route registration:


<router-view name="view1"></router-view>
<router-view name="view2"></router-view>
<router-view></router-view>
Free download pdf