面向前端架构师，将同一领域的多个设置页面聚合为单一导航入口下…

# 电商后台设置页聚合方案（Vue3 + 标签页 + Slot）

一、整体思路

• 新建“系统设置”父页面作为唯一入口，内部用标签页切换物流/库存/售后三个子模块。
• 三个子页面保持独立文件，通过 slot（默认插槽） 挂载进统一的标签容器，实现“容器与内容解耦”，后续新增“支付设置”等只需加一个 slot 区块。
• 用 keep-alive 缓存各标签状态，切换不丢表单数据。

二、核心实现

1. 通用标签容器（TabContainer.vue，具名插槽 + 作用域插槽）

```vue

<template>

<el-tabs v-model="active" type="card">

<el-tab-pane

v-for="tab in tabs" :key="tab.name"

:label="tab.label" :name="tab.name" lazy>

<slot :name="tab.name" :active="active" />

</el-tab-pane>

</el-tabs>

</template>

<script setup>

defineProps({ tabs: Array })

const active = defineModel({ type: String, default: 'logistics' })

</script>

```

2. 系统设置入口（SystemSettings.vue，slot 挂载三个页面）

```vue

<template>

<TabContainer :tabs="tabs" v-model="active">

<template #logistics><keep-alive><LogisticsSetting /></keep-alive></template>

<template #stock><keep-alive><StockSetting /></keep-alive></template>

<template #afterSale><keep-alive><AfterSaleSetting /></keep-alive></template>

</TabContainer>

</template>

<script setup>

import { ref } from 'vue'

import TabContainer from './TabContainer.vue'

import LogisticsSetting from './LogisticsSetting.vue'

import StockSetting from './StockSetting.vue'

import AfterSaleSetting from './AfterSaleSetting.vue'

const active = ref('logistics')

const tabs = [

{ name: 'logistics', label: '物流设置' },

{ name: 'stock', label: '库存设置' },

{ name: 'afterSale', label: '售后设置' },

]

</script>

```

3. 路由改造

• 保留三个子页面组件文件，删除/注释其独立路由菜单项。
• 新增一条路由：/settings/system 指向 SystemSettings.vue，菜单只展示“系统设置”。

三、注意事项与优化建议

• 权限：若三人权限不同，用 v-if 或权限指令控制