vue slot实现底部导航
Vue Slot 实现底部导航
在 Vue 中，使用 slot 实现底部导航可以通过封装一个可复用的布局组件，将动态内容通过插槽注入。以下是具体实现方法：
基础实现
创建一个布局组件（如 BottomNavLayout.vue），定义默认插槽和具名插槽：
<template>
<div class="layout-container">
<!-- 主内容区域 -->
<main>
<slot></slot> <!-- 默认插槽 -->
</main>
<!-- 底部导航 -->
<footer class="bottom-nav">
<slot name="bottom-nav"></slot>
</footer>
</div>
</template>
<style scoped>
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background: #fff;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
</style>使用组件
在父组件中传入导航内容：
<template>
<BottomNavLayout>
<!-- 默认插槽内容 -->
<router-view/>
<!-- 具名插槽内容 -->
<template #bottom-nav>
<div class="nav-items">
<router-link to="/home">首页</router-link>
<router-link to="/profile">个人中心</router-link>
</div>
</template>
</BottomNavLayout>
</template>动态导航项
通过作用域插槽实现动态导航项：
<!-- BottomNavLayout.vue -->
<template>
<footer class="bottom-nav">
<slot name="bottom-nav" :items="navItems"></slot>
</footer>
</template>
<script>
export default {
data() {
return {
navItems: [
{ path: '/home', icon: 'home' },
{ path: '/settings', icon: 'settings' }
]
}
}
}
</script><!-- 父组件 -->
<template #bottom-nav="{ items }">
<div v-for="item in items" :key="item.path">
<router-link :to="item.path">
<i :class="`icon-${item.icon}`"></i>
</router-link>
</div>
</template>样式优化建议
- 使用 Flexbox 或 Grid 布局导航项
- 添加
active样式高亮当前路由 - 通过 CSS 变量实现主题定制
.bottom-nav {
display: flex;
justify-content: space-around;
}
.nav-items a.router-link-active {
color: var(--primary-color);
}这种方法实现了内容与导航的分离，便于维护和复用，同时支持动态配置导航项。
