uniapp自定义动态tabbar及全局挂载底部自定义组件_uniapp中使用vue3如何全局挂载tabbar

本篇文章解决的问题如下：

1：uniapp在pages.json中定义的tabbar，在非tabbar页面的时候不会显示，所以自定义了一个tabbar组件。（注意是自定义组件不是官方的custom-tab-bar组件）

2：有些tabbar需要动态变化，会员登陆前和会员登陆后可能会需要在tabbar上面展示不同的项目，所以要做到动态判断

3：uniapp所有页面底部都插入同一个组件（例如版权信息，或右侧悬浮的内容），每个页面都引入一次太过麻烦，所以在main.js里面挂载一次就可以所有页面使用。

一：自定义tabbar组件：（就不需要在pages.json里面再定义tabbar了）

<!--
    @时间：2020-03-16
    @描述：自定义底部导航栏
    @使用：
        在main.js全部引入：
            import tabBar from "@/pages/common/tabBar.vue"
            Vue.component('tabBar', tabBar)
        
        在需要显示的页面底部添加：
        <view>
            <view>这里是页面内容代码区域</view>　　　　　　　// 其中uni-p-b-98是公共样式类名，表示padding-bottom: 98upx;  设置的98upx是和底部导航栏的高度保持一致，页面的内容就不会被底部导航遮挡住啦
            <view class="uni-p-b-98"></view>　　　　　　　// 最后引入自定义组件，并传当前栏目对应的pagePath到自定义组件，显示当前栏目的选中样式
            <tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>
        </view>
 -->
<template>
    <view class="uni-tabbar">
        <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(ite