這是要做成寫封裝效果，

這個重點就是要學會router的用法，用router進行各個頁面的跳轉，（這裡的跳轉不是說真跳轉了，而是url拼接了個路徑。然後js程式碼讀到這個路徑，去做對應的頁面展示）

這是檔案路徑，

首先我們來看看router裡面的index.vue程式碼

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
//懶載入
 3 const Home = () => import('../views/home/Home')
 4 const Category = () => import('../views/category/Category')
 
 5 const File = () => import('../views/file/File')
 6 const Cart = () => import('../views/cart/Cart')
 7 //安裝外掛ue
 8 Vue.use(VueRouter)
 9 //建立路由物件
10 const routes = [
11     {
12         path: '',
13         redirect: '/home'
14     },
15     {
16         path: '/home',
17         component: Home
18     },
 
19     {
20         path: '/category',
21         component: Category
22     },
23     {
24         path: '/file',
25         component: File
26     },
27     {
28         path: '/cart',
29         component: Cart
30     },
31 ]
32 const router = new VueRouter({
33     routes,
34     mode: 'history'
35 })
 
36 //匯出
37 export default router

這裡採用的懶載入（將不同的路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應的元件這樣就更加高效了）

然後是Tabbar.vue這裡面採用的預留插槽，這樣使別人用起來更加的方便，可以新增不同的樣式，

 1 <template>
 2     <div class="tab-bar">
 3       <slot></slot>
 4     </div>
 5   </template>
 6   
 7   <script>
 8     export default {
 9       name: "TabBar"
10     }
11   </script>
12   
13   <style scoped>
14     .tab-bar {
15       background-color: #f6f6f6;
16       height: 49px;
17       border-top: 1px solid #eee;
18       box-shadow: 0 -1px 1px rgba(150,150,150,.08);
19   
20       position: fixed;
21       left: 0;
22       right: 0;
23       bottom: 0;
24   
25       display: flex;
26       text-align: center;
27     }
28   </style>
29   

然後是TabBarItem.vue裡面的程式碼

 1 <template>
 2     <div class="tab-bar-item" @click="itemClick">
 3         <div v-if="!isActive">  <slot name='item-icon'></slot></div>
 4         <div v-else>  <slot name='item-icon-active'></slot></div>
 5         <div :style='activeStyle'><slot name='item-text'></slot></div>
 6         
 7     </div> 
 8 </template>
 9 
10 <script>
11     export default {
12         name: 'TabBarItem',
13         props: {
14             path:String,
15             activeColor:{
16                 type:String,
17                 default:'hotpink'
18             }
19         },
20         
21         data() {
22             return {
23                
24             }
25         },
26         computed:{
27             isActive(){
28                return  this.$route.path.indexOf(this.path)!== -1
29             },
30             activeStyle(){
31                 return this.isActive?{color:this.activeColor}:{}
32             }
33         },
34         methods: {
35             itemClick() {
36                 this.$router.push(this.path)
37             }
38         }
39     }
40 </script>
41 <style scoped>
42       .tab-bar-item {
43         flex: 1;
44         text-align: center;
45         height: 49px;
46         font-size: 14px;
47     }
48     .tab-bar-item img {
49         width: 24px;
50         height: 24px;
51         margin-top:3px;
52         vertical-align: middle;
53         margin-bottom: 2px;
54     }
55   
56     </style>

依舊是插槽，然後顏色和路由地址是從外部元件傳進來的