效果如圖所示：

安裝vue-router：

npm install vue-router --save

底部選項卡：

使用的是：MUI中的 tab bar(選項卡)
下載mui:[mui](https://github.com/dcloudio/mui),將其中的dist資料夾放到專案中的static資料夾下

核心檔案引入：

在main.js檔案中引入：
// 引入路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入MUI樣式
import './static/vendor/mui/dist/css/mui.css'

裡面的知識點：

1、自定義底部按鈕圖示
2、選項卡切換時選中樣式繫結

技術實現：

1、自定義圖示：
   阿里巴巴向量圖：http://iconfont.cn
   選好合適的圖示，新增入庫，選擇新增至專案（需要登陸），不要
   選擇下載素材。選擇Font class ,下載至本地。
   把資料夾中的iconfont.ttf檔案拷貝到專案中的mui-dist-
   fonts資料夾下
   把iconfont.css中的
   /*自定義圖示*/
    .icon-huiyuan:before { content: "\e715"; }
    .icon-gouwuche:before { content: "\e600"; }
    拷貝到專案中的mui-dist-css中的mui.css裡
   使用的時候直接新增對應類名即可，例如：
 

//路由，:to表示去往哪個頁面
<router-link class="mui-tab-item" :to="{name:'vip'}">
    <span class="mui-icon icon-huiyuan"></span>
    <span class="mui-tab-label">會員</span>
</router-link>

2、選單切換樣式繫結

// 建立物件並配置路由規則
let router = new VueRouter({
    //選中時通過新增類名新增樣式
    linkActiveClass:'mui-active'
 
,
    routes:[
        {path:'/',redirect:{name:'home'}},
        {name:'home',path:'/home',component:Home},
        {name:'vip',path:'/vip',component:Vip}  
    ]
})