用router-link做一个底部导航组件

1.代码bottom.vue

[html]  view plain  copy

1. <template>  
2.     <div class="bottom">  
3.       <ul class="bottom-ul">  
4.           <router-link tag="li" :to="{path:'/home'}">  
5.             <i class="iconfont icon-home"></i>  
6.             <span>首页</span>  
7.           </router-link>  
8.           <router-link tag="li" :to="{path:'/index'}">  
9.             <i class="iconfont icon-fenlei"></i>  
10.             <span>分类</span>  
11.           </router-link>  
12.           <router-link tag="li" :to="{path:'/cart'}">  
13.             <i class="iconfont icon-gouwuche"></i>  
14.             <span>购物车</span>  
15.           </router-link>  
16.           <router-link tag="li" :to="{path:'/UserCenter'}">  
17.             <i class="iconfont icon-my"></i>  
18.             <span>会员中心</span>  
19.           </router-link>  
20.       </ul>  
21.     </div>  
22. </template>  
23.   
24. <script>  
25.     export default {  
26.         name: 'hello',  
27.         data () {  
28.             return {  
29.             }  
30.         },  
31.         methods: {  
32.         }  
33.     }  
34. </script>  
35.   
36. <style scoped>  
37.   
38.   @import "../../assets/icon/iconfont.css";  
39.   
40.   /*bottom*/  
41.   .bottom{  
42.     width: 100%;  
43.     height: 8vh;  
44.     color: #BEBEC0;  
45.     /*border: 1px solid #0000ff;*/  
46.     background-color: #404042;  
47.     position: fixed;  
48.     bottom:0;  
49.   }  
50.   .bottom-ul{  
51.     height: 100%;  
52.     display: flex;  
53.     flex-direction: row;  
54.     justify-content: space-between;  
55.   }  
56.   .bottom-ul>li{  
57.     height: 100%;  
58.     width: 25%;  
59.     display: flex;  
60.     flex-direction: column;  
61.     justify-content: center;  
62.     align-items: center;  
63.   }  
64.   .active{  
65.     background-color: yellow;  
66.   }  
67.   /*底部router-link 的激活样式切换*/  
68.   .router-link-active{  
69.     color: #fff;  
70.     background-color: #262628;  
71.     border-bottom: 2px solid #CF274A;  
72.   }  
73.   .bottom-ul>li>i{  
74.     font-size: 1.5rem;  
75.   }  
76.   .bottom-ul>li>span{  
77.     font-size: 0.75rem;  
78.   }  
79. </style>  

2.关于路由设置。

[html]  view plain  copy

1. import Vue from 'vue'  
2. import Router from 'vue-router'  
3. import Hello from '@/components/Hello'  
4. import Swiper from '@/components/test/swiper'     //test  
5. import Checkbox from '@/components/test/checkbox'     //test  
6.   
7. import Home from '../page/home.vue'  
8. import Detail from '../page/detail.vue'  
9. import Cart from '../page/cart.vue'  
10. import Index from '../page/child/index.vue'  
11. import UserCenter from '../page/child/userCenter.vue'  
12. import New from '../page/child/new.vue'  
13. import ZheKou from '../page/child/zhekou.vue'  
14.   
15. Vue.use(Router)  
16.   
17. export default new Router({  
18.   routes: [  
19.     {  
20.       path: '/',  
21.       name: 'Hello',  
22.       redirect:'/home/new',  
23.       component: Hello  
24.     },  
25.     {  
26.       path:'/home',  
27.       name:'Home',  
28.       component:Home,  
29.       redirect:'/home/new',  
30.       children:[  
31.         {path:'/home/new',name:'new',component:New},  
32.         {path:'/home/zk',name:'zk',component:ZheKou},  
33.       ]  
34.     },  
35.     { path:'/detail', name:'Detail',component:Detail},  
36.     { path:'/cart',   name:'Cart',  component:Cart},  
37.     { path:'/index',  name:'Index',  component:Index},  
38.     { path:'/userCenter',  name:'UserCenter',  component:UserCenter},  
39.   
40.     {  
41.       path:'/swiper',  
42.       name:'swiper',  
43.       component:Swiper  
44.     },  
45.     {path:'/checkbox',name:'Checkbox',component:Checkbox}  
46.   
47.   ],  
48.   // linkActiveClass:'active'  
49. })  

3.关于样式切换问题：

a 直接在页面style里用了。class类：router-link-active

[html]  view plain  copy

1. /*底部router-link 的激活样式切换*/  
2.   .router-link-active{  
3.     color: #fff;  
4.     background-color: #262628;  
5.     border-bottom: 2px solid #CF274A;  
6.   }  

b.也可以 设置属性activeClass

c.也可以在路由配置那里命名一个active，然后页面里写一个active类，

样式切换跟随路由而激活。精确匹配还可以用属性exact,,,

具体可以参考官方文档 点击打开链接 https://router.vuejs.org/zh-cn/api/router-link.html