как использовать 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


Ответы (0 шт):