在 RouterLink 中扩展父视图插槽 vỉew

Question

我有一个定义的 Vue 路由、父视图和两个子视图

./route/index.ts

const router = createRouter({
    routes: [
        {
            path: '/dataset/:dataset_name',
            component: DatasetItemView,
            children: [
                {
                    path: '',
                    component: DatasetOverview
                },
                {
                    path: '/dataset/:dataset_name/downloads',
                    component: DownloadView
                }
            ],
        },
    ]
})

./views/DatasetItemView.vue

<template>
    <div class="row">
        <div class="ten columns">
            <div>
                <RouterLink :to="`/dataset/${route.params.dataset_name}`">Overview</RouterLink>
                <RouterLink :to="`/dataset/${route.params.dataset_name}/downloads`">Downloads</RouterLink>
            </div>

            <RouterView />
        </div>

        <div class="submenu two columns">
            <li>
                <RouterLink to="/">Back</RouterLink>
            </li>
            <!-- <slot></slot> -->
        </div>
    </div>
</template>

./views/DatasetOverview.vue

<template>
    <p>Dataset overview</p>
</template>

./views/DownloadView.vue

<template>
    <p>Download view</p>

    <-- Want to extend here -->
</template>

我想在子视图中重用

<div class="submenu">...</div>

并扩展 div 以在

<li>

中添加更多

./views/DownloadView.vue

。

有什么方法可以存档，因为我检查过

<RouterView />

只在

<RouterView />

位置添加插槽或者我的设计是错误的？

Answer 1

您可能会为命名视图而烦恼：

https://router.vuejs.org/guide/essentials/named-views.html

或者只是使用传送：

VUE SFC 游乐场

<template>
    <p>Download view</p>
    <teleport to=".submenu">
        <li><a>Downloads submenu</a></li>
    </teleport>
</template>