SOURCE

const User = {
	template: `
		<div class='user'>
			<h2>User {{ $route.params.id }}</h2>
			<router-view></router-view>
        </div>
    `
}

const UserHome = {
	template: '<div>Home</div>'
}

const UserProfile = {
	template: '<div>Profile</div>'
}

const UserPosts = {
	template: '<div>Posts</div>'
}

const router = new VueRouter({
	routes: [
		{
			path: '/user/:id',
			component: User,
			children: [
				{
					path: '',
					component: UserHome
				},
				{
					path: 'profile',
					component: UserProfile
				},
				{
					path: 'posts',
					component: UserPosts
				}
			]
		}
	]
})

const app = new Vue({
	router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id='app'>
	<p>
		<router-link to='/user/foo'>/user/foo</router-link>
		<router-link to='/user/foo/profile'>/user/foo/profile</router-link>
		<router-link to='/user/foo/posts'>/user/foo/posts</router-link>
	</p>
	<router-view></router-view>
</div>