使用vue2.0写移动端的时候，经常会写底部导航效果，点击切换路由效果，实现图片和文字颜色切换。vue2.0也提供了很多ul框架供我们实现效果，今天就用原生的实现一个底部导航切换，直接上代码：
效果图
路由搭建
代码语言：javascript复制export default new Router({
routes: [
{
path: "/Home",
component: Home,
},
{
path: "/recommend",
component: Recommend
},
{
path: "/search",
component: Search
},
{
path: "/chat",
component: Chat
},
{
path: "/me",
component: Me
},
{
path: '/',
redirect: '/home'
},
]
});页面模板搭建，src和on都要动态的绑定，使用三目运算判断每次点击切换
代码语言：javascript复制<div class="bottom-tab">
<div class="tab-item" @click="switchTo('/home')">
<img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
<span :class="{on: '/home' === $route.path}">首页</span>
</div>
<div class="tab-item" @click="switchTo('/recommend')">
<img :src="'/recommend' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="推荐">
<span :class="{on: '/recommend' === $route.path}">推荐</span>
</div>
<div class="tab-item" @click="switchTo('/search')">
<img :src="'/search' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="搜索">
<span :class="{on: '/search' === $route.path}">搜索</span>
</div>
<div class="tab-item" @click="switchTo('/chat')">
<img :src="'/chat' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="聊天">
<span :class="{on: '/chat' === $route.path}">聊天</span>
</div>
<div class="tab-item" @click="switchTo('/me')">
<img :src="'/me' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="我的">
<span :class="{on: '/me' === $route.path}">我的</span>
</div>
</div>在data里面定义tabBarImgArr:数组，用于存放图片。
代码语言：javascript复制tabBarImgArr:[ //图片切换
{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切换
代码语言：javascript复制methods:{
switchTo(path){
// console.log(this.$router)
this.$router.replace(path)
}
}css样式效果
代码语言：javascript复制.bottom-tab
width 100%
height 50px
background-color #fff
position fixed
left 0px
bottom 0px
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
