Настраиваю маршрутизацию, используя VueRouter, VueJS. Компонент LessonsList отображается, url меняется.router-link работает. Но не отображается вложенный компонент - Lesson. Вместо него компонент 404 ошибки. Страница не найдена. Маршрут при этом такой, каким и должен быть.
Что я делаю не так?
routes.js
const LessonsList = () => import ('./components/Course/LessonsList');
const Lesson = () => import ('./components/Course/Lesson');
const E404 = () => import ('./components/Store/E404');
const routes = [
{
path: '/',
redirect: {name: 'course'}
},
{
name: 'course',
path: '/course',
component: LessonsList,
children: [
{ name: 'lesson', path: 'lesson:id', component: Lesson }
]
},
{
path: '*',
component: E404
}
];
LessonsList.vue
<template>
<ul>
<router-link v-for="(lesson,index) in lessons"
v-bind:key="index"
v-bind:to="'/course' + /lesson/ + lesson.id"
tag="li">
<h2>LessonsList</h2>
</router-link>
</ul>
</template>
Lesson.vue
<template>
<section>
<h4>Lesson</h4>
</section>
</template>