使用的是vant ui的組件庫
```
<template>
<div>
<!-- 底部菜單欄 -->
//v-model="active"：當前激活的菜單索引
<van-tabbar v-model="active" active-color="darkred" inactive-color="#666">
<van-tabbar-item icon="home-o" to="/home">首頁</van-tabbar-item>
<van-tabbar-item icon="label-o" to="/topic">專題</van-tabbar-item>
<van-tabbar-item icon="apps-o" to="/category">分類</van-tabbar-item>
<van-tabbar-item icon="cart-o" to="/cart">購物車</van-tabbar-item>
<van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
```
方法一：通過計算屬性，動態改變激活的菜單
```
computed:{
//刷新后，tabbar的選中菜單顯示異常，方法一：計算當前的路由，顯示選中的菜單
active :{
get(){
switch (this.$route.path) {
case '/home': return 0;
case '/topic': return 1;
case '/category': return 2;
case '/cart': return 3;
case '/user': return 4;
}
},
set(){}
}
}
```
方法二：在路由中添加meta數據，激活菜單綁定$route.meta.num即可
```
//路由
{
path: '/home',
name: 'Home',
component: Home,
//元數據標簽：可以通過this.$route.meta獲取到里面定義的數據
meta : {
num : 0
},
children: [
{
path: 'popup',
name: 'Popup',
component: () => import( '../views/myPopup.vue')
}]
},
//將激活的菜單索引綁定為$route.meta.num
```
```
// 解決路由升級跳轉報錯問題
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
```
