vue-router仿天猫底部导航栏

首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。

分析：

1、图标的获取

进入阿里巴巴矢量图标库，网址http://www.iconfont.cn。

点击官方图标库，选择天猫图标库，选中放入购物车。

点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。

此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后期如果要添加小图标的话，只需要重新生成在线链接，然后更新link即可

复制链接到index.html的link标签内，具体为<link rel="stylesheet" href="http://at.alicdn.com/t/font_443540_nvmeyfe7k3rcc8fr.css">

引入图标，使用<i class="icon iconfont icon-wo"></i>区别在第三个class来引入对应图标

此时所需图标处理完毕

2、创建精选、品牌、会员、购物车、我及路由导航组件Home.vue、Brand.vue、Member.vue、Cart.vue、Me.vue、Tabs.vue

使用的样式时less，如果在.vue文件中写样式，style必须写成<style lang="less" type="text/less"></style>，否则会报错

Tabs.vue

[html] view plain copy

1. <template>  
2.   <div class="tabs">  
3.     <!--命名路由-->  
4.     <ul>  
5.       <!--this inspection reports XML/HTML tags with missing mandatory attrbutes ,you can specify attrbute name that should not  be reported-->  
6.       <!--home被点击后，一直处于**状态，因此需要使用精确匹配模式，在router-link中添加exact属性-->  
7.       <router-link :to="{name:'Home'}" tag="li" exact>  
8.         <div>  
9.           <i class="icon iconfont icon-31shouye"></i>  
10.         </div>  
11.         <div>精选</div>  
12.       </router-link>  
13.       <router-link :to="{name:'Brand'}" tag="li">  
14.         <div>  
15.           <i class="icon iconfont icon-zhubaoshipin"></i>  
16.         </div>  
17.         <div>品牌</div>  
18.       </router-link>  
19.       <router-link :to="{name:'Member'}" tag="li">  
20.         <div>  
21.           <i class="icon iconfont icon-huiyuanqia"></i>  
22.         </div>  
23.         <div>会员</div>  
24.       </router-link>  
25.       <router-link :to="{name:'Cart'}" tag="li">  
26.         <div>  
27.           <i class="icon iconfont icon-gouwucheman"></i>  
28.         </div>  
29.         <div>购物车</div>  
30.       </router-link>  
31.       <router-link :to="{name:'Me',params:{user:'xu'}}" tag="li">  
32.         <div>  
33.           <i class="icon iconfont icon-wo"></i>  
34.         </div>  
35.         <div>我</div>  
36.       </router-link>  
37.     </ul>  
38.   </div>  
39. </template>  
40. <script type="text/ecmascript-6">  
41.   export default {}  
42. </script>  
43. <style lang="less" type="text/less">  
44.   .tabs {  
45.     position: fixed;  
46.     bottom: 0;  
47.     left: 0;  
48.     background-color: #fff;  
49.     box-shadow: 0 2px 4px #000;  
50.     width: 100%;  
51.     & > ul, & > ul > li {  
52.       margin: 0;  
53.       padding: 0;  
54.     }  
55.     ul {  
56.       display: table;  
57.       width: 100%;  
58.       & > li {  
59.         text-align: center;  
60.         font-size: 16px;  
61.         display: table-cell;  
62.         padding: 8px 12px;  
63.         cursor: pointer;  
64.         &.router-link-active{  
65.           color: #D0021B;  
66.         }  
67.         & > div {  
68.           font-size: 14px;  
69.           & > i {  
70.             font-size: 30px;  
71.           }  
72.         }  
73.       }  
74.     }  
75.   }  
76. </style>  

我使用的是命名路由，这样我们就可以当路由组件变化时，直接修改router/index.js文件即可。

3、创建路由

router/index.js

[html] view plain copy

1. import Vue from 'vue'  
2. import Router from 'vue-router'  
3. import Home from '@/Home'  
4. import Brand from '@/Brand'  
5. import Member from '@/Member'  
6. import Cart from '@/Cart'  
7. import Me from '@/Me'  
8.   
9. Vue.use(Router)  
10.   
11. export default new Router({  
12.   //mode: 'history',  
13.   //base: __dirname,  
14.   //linkActiveClass: 'active', // 更改**状态的Class值  
15.   routes: [  
16.     {  
17.       path: '/',  
18.       name: 'Home',  
19.       component: Home  
20.     },  
21.     {  
22.       path: '/brand',  
23.       name: 'Brand',  
24.       component: Brand  
25.     },  
26.     {  
27.       path: '/member',  
28.       name: 'Member',  
29.       component: Member  
30.     },  
31.     {  
32.       path: '/cart',  
33.       name: 'Cart',  
34.       component: Cart  
35.     },  
36.     {  
37.       path: '/me',  
38.       name: 'Me',  
39.       component: Me  
40.     }  
41.   ]  
42. })  

4、App.vue引入组件Tabs.vue，并添加<router-view>渲染路径匹配到的视图组件

[html] view plain copy

1. <template>  
2.   <div id="app">  
3.     <Tabs></Tabs>  
4.     <div class="content">  
5.       <router-view></router-view>  
6.     </div>  
7.   </div>  
8. </template>  
9. <script>  
10.   import Tabs from "./Tabs.vue"  
11.   export default {  
12.     name: 'app',  
13.     data(){  
14.       return {}  
15.     },  
16.     components: {Tabs}  
17.   }  
18. </script>  
19. <style>  
20.   *{  
21.     padding:0;  
22.     margin:0;  
23.   }  
24.   #app {  
25.     font-family: 'Avenir', Helvetica, Arial, sans-serif;  
26.     -webkit-font-smoothing: antialiased;  
27.     -moz-osx-font-smoothing: grayscale;  
28.   }  
29. </style>  

5、导航状态样式
<router-link>对应的路由匹配成功后，就会自动设置class属性值为router-link-exact-active router-link-active

router-link-exact-active：配置当链接被精确匹配的时候应该**的CSS类名。

router-link-active：设置链接**时使用的 CSS 类名。

如果要修改CSS样式命名，可通过<router-link>属性exact-active-class和active-class分别设置，也可通过路由构造函数选项linkExactActiveClass和linkActiveClass来设置

点击品牌时展示如下：Home的Tab仍然设置了routet-link-activeCSS类名，如果设置routet-link-active样式颜色为红色，精选就会一直保持红色

此时需要使用”精确匹配模式“，<router-link :to="{name:'Home'}" tag="li" exact> 则使用exact，此时的Home的Tab就不会被设置routet-link-activeCSS类名了

访问http://localhost:8080/#/brand就不会匹配到http://localhost:8080/#/