使用的是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)
}
```
