[Vuejs]-Vue.js nested routing

const Home = {
        template: '<h1>Home</h1>'
    };

    const Help = {
        template: '<h1>Help</h1>'
    };

    const Profile = {
        template: '<h1>Profile</h1>'
    };

    const User = {
        template: '<h1>User</h1>'
    };

    routes = [
        {path: '/', component: Home},
        {path: '/help', component: Help},
        {path: '/user', component: User},
        {path: '/user/:id', component: {
            render(h) {
                return h(
                    'h1',
                    { style: {color: 'skyblue'} },
                    `User id: ${this.$route.params.id}`
                );
            }
        }}
    ];

    const router = new VueRouter({
        routes
    });

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <div id="app">
        <router-link :to='{path: "/"}'>/</router-link> <br>
        <router-link :to='{path: "/help"}'>/help</router-link> <br>
        <router-link :to='{path: "/user"}'>/user</router-link> <br>
        <router-link :to='{path: "/user/userid"}'>/user/userID</router-link>
        {{$route.path}}
        <router-view></router-view>
        <br>
        <button @click='$router.go(-1)'>go back</button>
        <button @click='$router.go(1)'>go forward</button>
    </div>