Uncaught Error: [vue-router] "path" is required in a route configuration

I'm following the official example but I don't know why I get a blank page with this js error

vue-router.esm.js?fe87:10 Uncaught Error: [vue-router] "path" is required in a route configuration.

Here is my two pages:

/:language/bar                     /:language/foo
+------------------+                  +-----------------+
| +---------+      |                  | +---------+     |
| | header  |      |                  | | header  |     |
| +---------+      |                  | +---------+     |
| +--------------+ |                  | +-------------+ |
| | bar          | |  +------------>  | | foo         | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

And this is how I'm trying to do it.

My entrypoint js file:

import Vue from 'vue';
import router from './router';

// import some components

let vm = new Vue({
    el: '#app',
    router,
    components: {/*imported components*/},
});

vm.$language.current = vm.$route.params.language;

My entrypoint html

<body>
   <div id="app">
       <!-- this is the header, the common part -->
       <navbar fullname=''></navbar>

       <router-view></router-view>
   </div>
</body>

My router

import Vue from 'vue';
import Router from 'vue-router';

// import foo and bar components

Vue.use(Router);

let routes = [
    {
        path: '/:language',
        name: 'homepage',
        children: [
            {
                path: 'foo',
                component: Foo
            },
            {
                path: 'bar',
                component: Bar
            },
        ]
    }
];

export default new Router({routes,});

My foo component

<template>
    <div>
        <h1>FOO</h1>
    </div>
</template>

<script>export default {};</script>

How do I fix this error?

Solution

You should add a component also for the parent.