在我們平時練習或者實際專案中也好，我們常常遇到這麼一個需求：移動端中的導航並不是在頂部也不是在底部，而是在最底部且是固定的，當我們點選該導航項時會切換到對應的元件。相信對於很多朋友而言，這是一個很簡單的需求，而且市面上有很多開源的元件庫就可以實現，像比如說：cube-ui等！那麼對於一個要是還在練習以及對第三方元件庫不是很瞭解的朋友不妨看看我這篇，相信會對你有所收穫的！

首先，在實現這個需求之前，我們先分析或者回想下和自己做過的demo中哪個類似，相信很多朋友立馬就會想起來---tab欄切換，那麼對於html結構的設計我們便可以藉助tab欄切換的結構：一個大盒子套著兩個小盒子，一個作容器，另一個作導航！

html結構

<div>
    <div>容器</div>
    <div class="footer">
      <div class="module-nav">
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>首頁</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>發現</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon-add"></div>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>訊息</h3>
        </div>
        <div class="nav-i">
          <div class="iconfont icon"></div>
          <h3>我的</h3>
        <div>
      </div>
    </div>
  </div>
 

做完HTML結構的編寫，那我們在給上面的骨架穿上衣服，根據需求“底部固定”，我們很容易便會想到 position: fixed ，當然我這裡也是用固定定位實現的，但佈局採用的是 flex，在採用 flex 結合固定定位佈局的時候常常會出現很多不必要的問題，如：flex 屬性失效，兩者效果衝突等，原因更多的便是“脫標”導致的，其中更多的便是出現在父元素 flex，子元素 position的時候，這時候可以中間加個div使兩者擺脫聯絡。

css樣式（ stylus形式 ）

.footer
  position fixed
  bottom 0
  z-index 999
  max-width 1080px
  width 100%
  border-top 1px solid #C0C0C0
  .module-nav
    display flex
    justify-content space-around
    .nav-i
      width 60px
      text-align center
      .icon
        font-size 35px
        padding 5px 0
      .icon-add
        font-size 60px
      h3
        font-size 15px
        font-weight normal
        margin 0
        padding-bottom 5px
 

骨架和衣服都做好後，那麼大概的雛形就出來了，我們的需求也就實現了一半，剩下的便是元件切換了。這個就簡單了，只需要配置下路由表，然後指定跳轉便可以了

廣州VI設計公司https://www.houdianzi.com

路由表：

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/find",
      name: "find",
      component: Find
    },
    {
      path: "/info",
      name: "info",
      component: Info
    },
    {
      path: "/user",
      name: "user",
      component: User
    }
  ]

最後在“容器”內新增router-view即可，下面可以看看完整程式碼：

// HTML
<div>
    <div class="main-content">
      <router-view></router-view>
    </div>
    <div class="footer">
      <div class="module-nav">
        <router-link tag="div" to="/" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>首頁</h3>
        </router-link>
        <router-link tag="div" to="/find" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>發現</h3>
        </router-link>
        <div class="nav-i">
          <div class="iconfont icon-add"></div>
        </div>
        <router-link tag="div" to="/info" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>訊息</h3>
        </router-link>
        <router-link tag="div" to="/user" class="nav-i">
          <div class="iconfont icon"></div>
          <h3>我的</h3>
        </router-link>
      </div>
    </div>
  </div>

// css
.footer
  position fixed
  bottom 0
  z-index 999
  max-width 1080px
  width 100%
  border-top 1px solid #C0C0C0
  .module-nav
    display flex
    justify-content space-around
    .nav-i
      width 60px
      text-align center
      .icon
        font-size 35px
        padding 5px 0
      .icon-add
        font-size 60px
      h3
        font-size 15px
        font-weight normal
        margin 0
        padding-bottom 5px

// router
export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/find",
      name: "find",
      component: Find
    },
    {
      path: "/info",
      name: "info",
      component: Info
    },
    {
      path: "/user",
      name: "user",
      component: User
    }
  ]
});

小事做不好，何以做大事，堅持！