You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue路由中如何在子视图扩展父视图的Submenu插槽?

问题描述

我已经定义了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>

    <!-- 想要在这里扩展内容 -->
</template>

需求

我想在子视图中复用父视图的<div class="submenu">...</div>,并在./views/DownloadView.vue中为该div添加更多<li>元素。但发现<RouterView />只能在自身位置插入内容,请问有没有实现方法,或是我的设计存在问题?


解决方案

感谢@alexander-nenashev,我已通过以下方式解决问题:

/route/index.ts

{
    path: '/dataset/:dataset_name',
    name: 'dataset',
    component: DatasetItemView,
    children: [
        {
            path: '',
            name: 'dataset_overview',
            components: {
                default: DatasetOverview,
                submenu: DatasetItemMenu,
            }
        },
        {
            path: '/dataset/:dataset_name/downloads',
            name: 'dataset_downloads',
            components: {
                default: DownloadView,
                submenu: DownloadMenu,
            }
        }
    ],
}

./DatasetItemMenu.vue

<template>
    <h6 class="grid-heading">Quick Actions</h6>
    <ul>
        <li>
            <RouterLink to="/">返回主页</RouterLink>
        </li>
    </ul>

    <!-- 额外操作 -->
    <slot></slot>
</template>

./DownloadMenu.vue

<script setup lang="ts">
import DatasetItemMenu from './DatasetItemMenu.vue'
</script>

<template>
    <DatasetItemMenu>
        <p>这里添加额外操作</p>
    </DatasetItemMenu>
</template>

内容的提问来源于stack exchange,提问作者Thong Nguyen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 15:25:26