vue簡單案例 編寫一個移動端底部導航欄

效果圖：

src源碼目錄結構：

//TabbarItem.vue
<template>
  <div class="tabbar-item" @click="itemclick">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :class="{active:isActive}"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
  import '../../assets/fonts/iconfont.js'
  export default {
    name:'TabbarItem',
    props:{
      path:String
    },
    computed:{
      isActive(){
        return this.$route.path.indexOf(this.path) != -1
      }
    },
    methods:{
      itemclick(){
        this.$router.replace(this.path)
      }
    }
  }
</script>

<style>
  /* @import '../../assets/fonts/iconfont.css'; */
  .tabbar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 13px;
    margin-top: 10px;
    color: gray;
  }
/*  .iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    font-weight: bolder;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } */
  .icon {
    width: 25px;
    height: 25px;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
  }
  .active{
    color: black;
    font-weight: bold;
  }

  .icon-active{
    width: 25px;
    height: 25px;
    vertical-align: -0.15em;
    fill: deeppink;
    overflow: hidden;
  }
</style>

//TabBar.vue
<template>
  <div class="tabbar">
    <tabbar-item path="/home">
      <svg slot="item-icon" class="icon" aria-hidden="true">
        <use xlink:href="#icon-zhuye"></use>
      </svg>
      <svg slot="item-icon-active" class="icon-active" aria-hidden="true">
        <use xlink:href="#icon-zhuye"></use>
      </svg>
      <div slot="item-text">首頁</div>
    </tabbar-item>
    <tabbar-item path="/catagory">
      <svg slot="item-icon" class="icon" aria-hidden="true">
        <use xlink:href="#icon-zhongxin"></use>
      </svg>
      <svg slot="item-icon-active" class="icon-active" aria-hidden="true">
        <use xlink:href="#icon-zhongxin"></use>
      </svg>
      <div slot="item-text" >分類</div>
    </tabbar-item>
    <tabbar-item path="/search">
      <svg slot="item-icon" class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
      <svg slot="item-icon-active" class="icon-active" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
      <div slot="item-text">搜索</div>
    </tabbar-item>
    <tabbar-item path="/shop">
      <svg slot="item-icon" class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuche"></use>
      </svg>
      <svg slot="item-icon-active" class="icon-active" aria-hidden="true">
        <use xlink:href="#icon-gouwuche"></use>
      </svg>
      <div slot="item-text">購物車</div>
    </tabbar-item>
    <tabbar-item path="/profile">
      <svg slot="item-icon" class="icon" aria-hidden="true">
        <use xlink:href="#icon-geren"></use>
      </svg>
      <svg slot="item-icon-active" class="icon-active" aria-hidden="true">
        <use xlink:href="#icon-geren"></use>
      </svg>
      <div slot="item-text">我的</div>
    </tabbar-item>
  </div>
</template>

<script>
  import TabbarItem from './TabbarItem.vue';
  export default {
    name:'TabBar',
    components:{
      TabbarItem
    }
  }
</script>

<style>
  .tabbar{
    display: flex;
    background-color: #f2f2f2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px -1px 1px rgba(100,100,100,0.2);
  }
</style>

//index.js
import Vue from 'vue'
import Router from 'vue-router'

//resolve 重複點擊報錯
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};

const Home = () => import('../views/home/Home.vue')
const Catagoty = () => import('../views/catagory/Catagory.vue')
const Search = () => import('../views/search/Search.vue')
const Shop = () => import('../views/shop/Shop.vue')
const Profile = () => import('../views/profile/Profile.vue')

Vue.use(Router)

const routes = [
  {
    path:'/',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/catagory',
    component:Catagoty
  },
  {
    path:'/search',
    component:Search
  },
  {
    path:'/shop',
    component:Shop
  },
  {
    path:'/profile',
    component:Profile
  }
]

const router = new Router({
  routes,
  mode:'history'
})

export default router

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

<script>
import TabBar from './components/tabbar/TabBar.vue'
import TabbarItem from './components/tabbar/TabbarItem.vue'
export default {
  name: 'App',
  components:{
    TabBar,
    TabbarItem
  }
}
</script>

<style>
  @import './assets/css/base.css';
</style>

主要的文件就以上四個，因爲只實現了底部的導航欄，沒有實現頁面內容，因此views文件夾下的視圖只是一些顯示了文字信息的簡單模板，這裏不再給出。

另外，其它的文件，像main.js，這個不需要改動，按腳手架配的就好，fonts我是採用的iconfont，別的就沒什麼了。

總之，今日收穫加1，mark。