[Vuejs]-How to use children path in Vue.Js

I think you missed the <router-view></router-view> in your parent template (in test.vue). Router view is where the child component gets rendered. i.e.

<template>
<div>
    <h1>Test</h1>
    <button v-on:click="navigateTo('/test/p1')">p1</button>
    <router-view></router-view>
</div>
</template>