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
相关产品推荐
相关产品推荐

