Vue - маршрутный вложенный маршрут не загружает страницу моего компонента

Question

Я использую Vue -router, и мне нужно было использовать вложенный маршрут, поэтому я написал ключевое слово Children для ссылки на страницу дочернего компонента, поэтому моя проблема заключается в том, что я нажимаю ссылку на свой текущий URL заменяется вложенным маршрутом и идентификатором, но не загружает мой компонент, и когда я заменяю Router-Linke на другой компонент, который не является вложенным, он загружает компонент, поэтому я спрашиваю, в чем мои ошибки?

route. js

{
        path: '/targets',
        name: 'target',
        component: () =>
            import ( /* webpackChunkName: "target" */ '@/views/admin/Target.vue'),
            meta: {
                middleware: [
                    auth
                ],
                title: "Targets"
            },
            children:[
                {
                    path: '/targets/:id/details',
                    name: 'target-details',
                    props: true,
                    component: () =>
                        import ( /* webpackChunkName: "target" */ '@/views/admin/TargetDetails.vue'),
                        meta: {
                            middleware: [
                                auth
                            ],
                            title: "TargetDetails"
                        }
                },
            ]
    },

target. vue

<template>
<div>
 <li class="clearfix" v-for="domain in domains" :key="domain.domain_id">{{ domain.domain }} 
                            <router-link class="more" 
                                :to="{ 
                                        name: 'target-details', 
                                        params: { 
                                            id: domain.domain_id 
                                        } 
                                    }"  >Target details <i class="fa fa-angle-right"></i>
                            </router-link>
                        </li>
</div>
</template>

TargetDetails. vue

<template>
   <div class="page-output">
      <h1>Target Details</h1>
   </div>
</template>

Answer 1

Вложенные маршруты предназначены для облегчения вложения компонентов (см. 1-ую «картинку»)

Вам необходимо включить <router-view> в ваш target.vue компонент ...

Если вы не хотите, чтобы содержимое TargetDetails.vue отображалось внутри target.vue, не используйте children config и вместо этого создайте маршрут target.vue верхнего уровня.