Single Page Applications Chapter 15<router-link to="soldiers">Soldiers</router-link>
<router-view></router-view>
</div>
`}As anticipated, there is another router-view entry point inside the User component that
will contain the nested routes components.
Then, write the Soldiers and Gold components, always before the routing code:
const Soldiers = { template: `
<div class="soldiers">
<span v-for="soldier in $root[$route.params.id].soldiers"></span>
</div>
`}
const Gold = { template: `
div class="gold">
<span v-for="coin in $root[$route.params.id].gold"></span>
</div>
`}These components will just display as many emojis as the gold or soldiers variable inside
the Vue root instance data option.
This is what the Vue root instance looks like:
new Vue({
router,
el: '#app',
data: {
Stark: {
soldiers: 100,
gold: 50
},
Lannister: {
soldiers: 50,
gold: 100
}
}
})