mpvue自定义tabbar

技术背景：基于vue得微信小程序（mpvue）
需求场景：不同得用户角色，tabbar不一样，并且一个角色可以切换至另一个角色
方法：
1，在app.vue的生命周期函数created里隐藏原生的tabbar
wx.hideTabBar()
在这里判断当前的角色，走接口或者其他逻辑，我这里写的demo就用的缓存wx.setStorageSync('type','student')
2，封装tabbar组件
html：
js逻辑：
在生命周期函数created中根据不同的角色给navList赋值，这里onShow也写了同样的代码是因为第一次加载组件的时候只会执行created，但是后面用这个组件的时候只会执行onShow，这里优化项就是把赋值这一步封装起来再两个周期函数中调用，代码复用

3，在tabbar页面调用组件
导入：import tabBar from "@/components/tabBar";
声明：components: { tabBar },
用：<tab-bar :selectNavIndex="