1.把项目所需要的图标都上传到static文件夹的img文件夹下

因为这个文件夹都是存放一些项目静态资源
因为这个选项卡不是路由组件，是非路由组件，因此在src下的components文件夹下新建一个TabBar
文件夹，里面新建一个名为TabBar.vue的非路由组件

TabBar组件部分的代码

<template>
    <div class="bottom-tab">
        <span class="tab-item"  @click="switchto('/home')">
>
            <img :src="$route.path.includes('/home')?TabBarArray[0].selected:TabBarArray[0].normal" alt="">
            <span :class="{on: $route.path.includes('/home')}">首页</span>
        </span>
        <span class="tab-item" @click="switchto('/recommend')">
            <img :src="$route.path.includes('/recommend')?TabBarArray[1].selected:TabBarArray[1].normal" alt="">
            <span :class="{on: $route.path.includes('/recommend')}">推荐</span>
        </span>
        <span class="tab-item" @click="switchto('/search')">
            <img :src="$route.path.includes('/search')?TabBarArray[2].selected:TabBarArray[2].normal" alt="">
            <span :class="{on: $route.path.includes('search')}">搜索</span>
        </span>
        <span class="tab-item" @click="switchto('/chat')">
            <img :src="$route.path.includes('/chat')?TabBarArray[3].selected:TabBarArray[3].normal" alt="">
            <span :class="{on: $route.path.includes('/chat')}">聊天</span>
        </span>
        <span class="tab-item" @click="switchto('/me')">
            <img :src="$route.path.includes('/me')?TabBarArray[4].selected:TabBarArray[4].normal" alt="">
            <span :class="{on: $route.path.includes('/me')}">个人中心</span>
        </span>
    </div>
</template>

<script>
    export default{
        name:"TabBar",
        data(){
            return {
                    TabBarArray:[
                {normal:require('./../../../static/img/icon_home.png'),selected:require('./../../../static/img/icon_home_selected.png')},
                {normal:require('./../../../static/img/icon_intro.png'),selected:require('./../../../static/img/icon_intro_selected.png')},
                {normal:require('./../../../static/img/icon_search.png'),selected:require('./../../../static/img/icon_search_selected.png')},
                {normal:require('./../../../static/img/icon_chat.png'),selected:require('./../../../static/img/icon_chat_selected.png')},
                {normal:require('./../../../static/img/icon_mine.png'),selected:require('./../../../static/img/icon_mine_selected.png')}
            ]
            }
        },
        methods:{
            switchto(path){
                this.$router.replace(path);
            }
        }
    }


</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .bottom-tab
        width 100%
        height 50px
        background-color #fff
        position fixed
        left 0
        bottom 0
        display flex 
        z-index 999
        
        .tab-item
            display flex
            flex 1
            flex-direction column
            align-items center
            justify-content center
            font-size 14px
            color #666
            
            img 
                width 35%
                margin-bottom 2px
            .on
                color red
                
</style>

主组件部分

<template>
    <div id="app">
        <router-view></router-view>
        <tab-bar></tab-bar>
    </div>
</template>

<script>

    import TabBar from './components/TabBar/TabBar'
    export default{
        name:"App",
        components:{
            TabBar
        }
    }


</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    #app
        width 100%
        height 100%
        background-color #f5f5f5
</style>

2.路由跳转方法解释

给图标均绑上一个swithto的方法，里面的参数即为路由的路径，而且配置完成路由后，增加了两个方法可供使用， $router,$ route
当我们打印this.$router时

微信截图_20181108013352.png
我们需要调用里面的replace方法来切换路由从而达到切换页面的目的

3.选项卡中图片和字体颜色切换方法解释

在Vuetools工具中，我们发现TabBar选项卡是这样的

微信截图_20181108013854.png

我们可以把Path当作是一个突破口，比如当我们选中首页时，路径就为home,当路由地址和path中的地址一致的时候即为选中状态，之所以会用上includes()方法的原因是，之后我们会制作头部二级路由切换，那么路径就会变成/home/hot诸如此类，但是实际上我们依旧还是在home这个路由上，所以只要路径中包含/home即可以视为选中状态，图片则是，先把所需要用到的图片路径放在data数据项中保存，而图片是在本地，所以需要用到require方法把图片路径导入进来