Создаю компонент - каталог контактов. Внутри этого компонента есть цикл создающий отдельные router-view для каждой карточки со своим уникальным именем. Это сделано для того, чтоб каждую карточку можно было редактировать отдельно, показывая форму редактирования лишь в ней (пропадает информация о контакте -> появляется форма с полями редактирования)
<template>
<div class="contact-cards">
<div class="contact-cards__wrap">
<h4 class="contact-cards__title">Контактные лица</h4>
<router-link :to="'/panel/partners/' + this.$route.params.id + '/add-contact'">
<button class="btn btn-outline-primary button-add">Добавить контакт</button>
</router-link>
</div>
<div class="contact-card contact-cards__contact-card" v-for="contact in contacts" :key="contact.id">
<router-view :name="'info' + contact.id" />
</div>
<router-link :to="'/panel/partners/' + this.$route.params.id + '/add-contact'">
<button class="btn btn-outline-primary button-add">Добавить контакт</button>
</router-link>
</div>
</template>
Проблема в том, как описать маршруты с таким динамичным именем в router.js
{
path: '/panel/partners/:id',
component: () => import('./components/partner/partners/profile-partner.vue'),
children: [
{
path: '/panel/partners/:id',
components: {
info: () => import('./components/partner/partners/profile/view-data-for-partner.vue'),
contact: () => import('./components/partner/partners/profile/view-contact-person.vue'),
company: () => import('./components/partner/partners/profile/view-company.vue'),
},
children: [
{
path: '/panel/partners/:id',
components: {
"тут имя с переменной": () => import('./components/partner/partners/profile/contact-person.vue'),
}
}
]
},
}
Не понимаю что нужно написать вместо "тут имя с переменной" чтобы все работало как задумано. Реально ли вообще воплотить эту задумку в жизнь?