最近做的專案裡有個固定在底部的導航，之前用ionic做的時候因為有UI庫所以很容易就解決了，因為這次是才接觸vue，對vue能使用的ui庫也不是很熟練，所以就自己封裝了一個底部導航元件，希望可以幫助有需求的小夥伴

就是下面這種固定在底部的導航

下面上程式碼

<template>
	 <div class="footer_guide">
	    <a href="javascript:;" class="guide_item" :class="{on : '/msite'===$route.path}" @click="goTo('/msite')">
	      	<span class="item_icon">
	        	<i class="iconfont icon-home"></i>
	      	</span>
	      	<span>首頁</span>
	    </a>
	    <a href="javascript:;" class="guide_item"  :class="{on : $route.path.indexOf('/search')!=-1}" @click="goTo('/search')">
	      	<span class="item_icon">
	        	<i class="iconfont icon-fenlei"></i>
	      	</span>
	      	<span>分類</span>
	    </a>
	    <a href="javascript:;" class="guide_item"  :class="{on : '/order'===$route.path}" @click="goTo('/order')">
	      	<span class="item_icon">
	        	<i class="iconfont icon-cart"></i>
	      	</span>
	      	<span>購物車</span>
	    </a>
	    <a href="javascript:;" class="guide_item"  :class="{on : '/profile'===$route.path}" @click="goTo('/profile')">
	      	<span class="item_icon">
	        	<i class="iconfont icon-mine"></i>
	      	</span>
	      	<span>我的</span>
	    </a>
  	</div>

</template>
 

上面是HTML部分，這個class的意思就是 如果當前路徑是 ‘/msite’(這個是我們首頁的路徑)的時候 ，顯示on這個class的樣式

下面上css樣式

<style scoped>
.footer_guide {
    border-top:1px soild #e4e4e4;
    position:fixed;
    z-index :100;
    left :0;
    right :0;
    bottom:1px;
    background-color:#fff;
    width:100%;
    height:50px;
    display:flex;
}
.guide_item{
    display:flex;
    flex:1;
    text-align :center;
    flex-direction:column;
    align-items :center;
    margin:5px;
    color:#999999;
} 
.on{
    color:#02a774 
}   
span{
    font-size:12px;
    margin-top:2px;
    margin-bottom:2px;
}
.iconfont{
    font-size:22px;
}

</style>
 

<script>
export default {
	methods : {
		goTo(path){
			this.$router.replace(path)
		}
	}
}
</script>

JS中寫好點選事件，點選跳轉到要去的路徑，這樣就可以了