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?