首先，在实现这个需求之前，我们先剖析或者回忆下和自己做过的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 flex10 justify-content space-around11 .nav-i12 width 60px13 text-align center14 .icon15 font-size 35px16 padding 5px 017 .icon-add18 font-size 60px19 h320 font-size 15px21 font-weight normal22 margin 023 padding-bottom 5px
骨架和衣服都做好后，那么大概的雏形就出来了，我们的需求也就实现了一半，剩下的便是组件切换了。这个就大略了，只须要配置下路由表，然后指定跳转便可以了
路由表
1 routes: [ 2 { 3 path: \公众/\"大众, 4 name: \"大众home\"大众, 5 component: Home 6 }, 7 { 8 path: \"大众/find\"大众, 9 name: \"大众find\"大众,10 component: Find11 },12 {13 path: \"大众/info\"大众,14 name: \公众info\"大众,15 component: Info16 },17 {18 path: \公众/user\公众,19 name: \"大众user\"大众,20 component: User21 }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 // css32 .footer33 position fixed34 bottom 035 z-index 99936 max-width 1080px37 width 100%38 border-top 1px solid #C0C0C039 .module-nav40 display flex41 justify-content space-around42 .nav-i43 width 60px44 text-align center45 .icon46 font-size 35px47 padding 5px 048 .icon-add49 font-size 60px50 h351 font-size 15px52 font-weight normal53 margin 054 padding-bottom 5px55 56 // router57 export default new Router({58 routes: [59 {60 path: \公众/\公众,61 name: \"大众home\"大众,62 component: Home63 },64 {65 path: \"大众/find\"大众,66 name: \"大众find\"大众,67 component: Find68 },69 {70 path: \公众/info\"大众,71 name: \公众info\公众,72 component: Info73 },74 {75 path: \"大众/user\公众,76 name: \"大众user\"大众,77 component: User78 }79 ]80 });
小事做不好，何以做大事，坚持！
