如圖所示，要完成類似的一個底部導航切換。

首先。我們需要分為5個大的VUE檔案。可以根據自己的習慣來放在不同的位置。

我將5個主要的VUE檔案放在了5個不同的資料夾

然後，在元件資料夾裡新建Tabbar.vue /以及Item.vue檔案

Item.vue檔案如下

<template>
	<div class="itemWarp flex_mid" @click='changePage'>
		<span v-show='!bol'>
			<slot name='normalImg'></slot>
		</span>
		<span v-show='bol'>
			<slot name='activeImg'></slot>
		</span>
		<span v-text='txt'></span>
	</div>
</template>
<script type="text/javascript">
	export default{
		name: 'Item',
		props:{
			txt:{
				type:String
			},
			page:{
				type:String
			},
			sel:{
				type:String
			}
		},
		computed:{
			bol: function(){
				if(this.sel == this.page){
					return true;
				}
				return false;
			}
		},
		methods:{
			changePage:function(){
				//點選跳轉對應的頁面
				this.$router.push('/'+this.page);
				this.$emit('change',this.page)
			}
		}
	}
</script>
<style type="text/css">
	.itemWarp{
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.itemWarp span{
		font-size: 12px;
	}

</style>
 

Tabbar.vue檔案如下

<template>
	<div class="tabberWarp" >
		<div class="warp">
			<Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes':sel='selected'>

				<img :src="item.normalImg" slot='normalImg'>
				<img :src="item.activeImg" slot='activeImg'>
			</Item>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Item from './Item.vue'
	export default{
		components:{
			Item
		},
		data:function(){
			return{
				selected:'skin',
				tabbarDes:[
					{
						txt:'表情',
						page:'skin',
						normalImg:require('../assets/images/zz_07.jpg'),
						activeImg:require('../assets/images/22_03.jpg')
						
					},				
					{
						txt:'面板',
						page:'phiz',
						normalImg:require('../assets/images/download_skin_ic.png'),
						activeImg:require('../assets/images/112_26.jpg')
					},
					{
						txt:'詞庫',
						page:'thesaurus',
						normalImg:require('../assets/images/zz_09.jpg'),
						activeImg:require('../assets/images/icon2_03.jpg')
					},
					{
						txt:'賬號',
						page:'account',
						normalImg:require('../assets/images/zz_11.jpg'),
						activeImg:require('../assets/images/cion_03.jpg')
					},
					{
						txt:'設定',
						page:'setup',
						normalImg:require('../assets/images/zz_13.jpg'),
						activeImg:require('../assets/images/22_03.jpg')
					}
				]
			}
		},
		methods:{
			getVal:function(res){
				this.selected = res;
			}
		}
	}
</script>
<style type="text/css">
	.warp{
		width: 100%;
		border-top: 1px solid #eee;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 0;
	}
	.warp img{
		width: 20px;
		height: 20px;
	}
	.tabberWarp img{
		margin-top: 10px;
		margin-bottom: 5px;

	}
	.tabberWarp{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 5px;
		background: #fff;
	}
</style>
 

Tabbar.vue檔案和Item.vue的關係為父子關係。

Tabbar.vue元件通過v-for迴圈tabbarDes裡面的資料。再通過props向下傳遞資料給子元件.

Item.vue能接受到父元件傳遞的資料。 

然後在Item.vue元件繫結點選事件。

$ router.push（ '/' + this.page）為跳轉到對應的頁面

$ emit（'change'，this.page）為使用$ emit觸發父元件的自定義事件change，將this.page作為引數傳遞到父元件中。父元件點選獲取到傳遞過來的引數。再props傳遞給item.vue元件。在computed計算屬性中。返回不同的布林值。來做底部圖片的顯示隱藏。

最後僅需要在App.vue中引入的TabBar元件即可。

<template>
  <div id="app">
    <router-view></router-view>
    <Tabbar></Tabbar>
    <div class="empty"></div>
  </div>
</template>

<script>
import Tabbar from'./components/tabbar'
export default {
  name: 'app',
  created:function(){
    this.$router.push('/')
  },
  components:{
    Tabbar
  }
}
</script>

最後需要注意的一點是，在v-for用於迴圈data中的資料時。圖片路徑的必須使用require引入的方式。不然會導致路徑錯誤，無法展示