在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等！那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇，相信会对你有所收获的！
首先，在实现这个需求之前，我们先分析或者回想下和自己做过的demo中哪个类似，相信很多朋友立马就会想起来---tab栏切换，那么对于HTML结构的设计我们便可以借助tab栏切换的结构：一个大盒子套着两个小盒子，一个作容器，另一个作导航！
HTML 结构
1 <div> 2 <div>容器</div> 3 <div class="footer"> 4 <div class="module-nav"> 5 <div class="nav-i"> 6 <div class="iconfont icon"></div> 7 <h3>首页</h3> 8 </div> 9 <div class="nav-i"> 10 <div class="iconfont icon"></div> 11 <h3>发现</h3> 12 </div> 13 <div class="nav-i"> 14 <div class="iconfont icon-add"></div> 15 </div> 16 <div class="nav-i"> 17 <div class="iconfont icon"></div> 18 <h3>消息</h3> 19 </div> 20 <div class="nav-i"> 21 <div class="iconfont icon"></div> 22 <h3>我的</h3> 23 <div> 24 </div> 25 </div> 26 </div>
做完HTML结构的编写，那我们在给上面的骨架穿上衣服，根据需求“底部固定”，我们很容易便会想到 position: fixed ，当然我这里也是用固定定位实现的，但布局采用的是 flex，在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题，如：flex 属性失效，两者效果冲突等，原因更多的便是“脱标”导致的，其中更多的便是出现在父元素 flex，子元素 position的时候，这时候可以中间加个div使两者摆脱联系。
css 样式（ stylus形式 ）
1 .footer 2 position fixed 3 bottom 0 4 z-index 999 5 max-width 1080px 6 width 100% 7 border-top 1px solid #C0C0C0 8 .module-nav 9 display flex 10 justify-content space-around 11 .nav-i 12 width 60px 13 text-align center 14 .icon 15 font-size 35px 16 padding 5px 0 17 .icon-add 18 font-size 60px 19 h3 20 font-size 15px 21 font-weight normal 22 margin 0 23 padding-bottom 5px
骨架和衣服都做好后，那么大概的雏形就出来了，我们的需求也就实现了一半，剩下的便是组件切换了。这个就简单了，只需要配置下路由表，然后指定跳转便可以了
路由表
1 routes: [
2 {
3 path: "/",
4 name: "home",
5 component: Home
6 },
7 {
8 path: "/find",
9 name: "find",
10 component: Find
11 },
12 {
13 path: "/info",
14 name: "info",
15 component: Info
16 },
17 {
18 path: "/user",
19 name: "user",
20 component: User
21 }
22 ]
最后在“容器”内添加router-view即可，下面可以看看完整代码：
1 // HTML
2 <div>
3 <div class="main-content">
4 <router-view></router-view>
5 </div>
6 <div class="footer">
7 <div class="module-nav">
8 <router-link tag="div" to="/" class="nav-i">
9 <div class="iconfont icon"></div>
10 <h3>首页</h3>
11 </router-link>
12 <router-link tag="div" to="/find" class="nav-i">
13 <div class="iconfont icon"></div>
14 <h3>发现</h3>
15 </router-link>
16 <div class="nav-i">
17 <div class="iconfont icon-add"></div>
18 </div>
19 <router-link tag="div" to="/info" class="nav-i">
20 <div class="iconfont icon"></div>
21 <h3>消息</h3>
22 </router-link>
23 <router-link tag="div" to="/user" class="nav-i">
24 <div class="iconfont icon"></div>
25 <h3>我的</h3>
26 </router-link>
27 </div>
28 </div>
29 </div>
30
31 // css
32 .footer
33 position fixed
34 bottom 0
35 z-index 999
36 max-width 1080px
37 width 100%
38 border-top 1px solid #C0C0C0
39 .module-nav
40 display flex
41 justify-content space-around
42 .nav-i
43 width 60px
44 text-align center
45 .icon
46 font-size 35px
47 padding 5px 0
48 .icon-add
49 font-size 60px
50 h3
51 font-size 15px
52 font-weight normal
53 margin 0
54 padding-bottom 5px
55
56 // router
57 export default new Router({
58 routes: [
59 {
60 path: "/",
61 name: "home",
62 component: Home
63 },
64 {
65 path: "/find",
66 name: "find",
67 component: Find
68 },
69 {
70 path: "/info",
71 name: "info",
72 component: Info
73 },
74 {
75 path: "/user",
76 name: "user",
77 component: User
78 }
79 ]
80 });
小事做不好，何以做大事，坚持！