как использовать slot в router-view? vue3
есть такой родительский компонент в котором расположен router-view:
IndexSlider.vue
<template>
...
<router-link :to="{ name: 'index-newsfeed' }" class="newsfeed-more-load__btn btn btn__hover">
<span>больше новостей</span>
</router-link>
<router-view>
<span slot="title">последние</span>
</router-view>
</template>
и такой компонент который загружается в этот router-view:
Newsfeed.vue
<template>
<div class="newsfeed-news">
<div class="newsfeed-news__title">
<slot name="title" />
</div>
...
</template>
как можно передать в slot который в Newsfeed.vue, какую нибудь разметку, из router-view который расположен в IndexSlider.vue(Newsfeed.vue естественно должен загрузиться в этот router-view)?
роуты:
const routes = [
{
path: '/',
name: 'index',
redirect: '/index'
},
{
path: '/index',
name: 'index-slider',
component: IndexSlider,
children: [
{
path: 'newsfeed',
name: 'index-newsfeed',
component: Newsfeed
}
]
}
]
код на CodeSandbox