16.1 开发底部导航和顶部导航——移动端项目功能开发

16.1.1 底部导航

    底部导航用的文件是components/content/BottomTabBar.vue，这个组件分别引用了components/common下的TabBar.vue和TabBarItem.vue。如下图16.1-2：

图16.1-2

这三个组件，构成了父-子-孙的关系，主要看一下插槽的用法。父组件往子组件和孙组件里插入4个导航条目。

底部导航组件开发好之后，在App.vue主框架文件里引用<bottom-tab-bar/>，代码如下：

<template>
    <div id="app">
        <router-view></router-view>
        <bottom-tab-bar></bottom-tab-bar>
    </div>
</template>
<script>
   import BottomTarBar from "./components/content/bottomtarbar/BottomTarBar";
    export default {
        name: 'app',
        components: {
            BottomTabBar
        }
    }
</script>
<style>
    /*css 引入方式*/
    @import "assets/css/base.css";
</style>

在主框架文件里引入底部导航，点击其中的一个导航按钮，对应的页面会加载到<router-view/>里。底部导航效果如图16.1-3：

图16.1-3

----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------