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

Vue Router Patterns Chapter 20

We can then add another tag inside our UserDetail.vue component to

display the child route. The template now looks like this:

<template>

<div class="container">

<div class="user">

// Omitted

</div>

<div class="posts">

<h1>Posts</h1>

<router-view></router-view>

</div>

</div>

</template>

To top it off, we've also added some styles that display the user information on the left and
posts on the right:

<style>

.container {

line-height: 2.5em;

text-align: center;

}

.user {

display: inline-block;

width: 49%;

}

.posts {

vertical-align: top;

display: inline-block;

width: 49%;

}

ul {

list-style-type: none;

}

</style>