uni-app 实现根据用户不同角色显示不同的tabBar

在网上大量百度之后,好多都走不通,自己总结了一下!!!

我的方法原理:  相当于封装一个公共组件,需要用的地方就调用,(把自带的tabBar隐藏了就好了),

样子都一样的,无非就是数据不一样,千万别想太复杂了

 

创建 组件 tabBar,

<template>
	<view>
		<view class="tabBar_css">
			<u-tabbar 
			:value="currentPagePath"
			:fixed="true" 
			:placeholder="true"
			:safeAreaInsetBottom="true"
			>
				<u-tabbar-item 
				v-for="(item,index) in tabBerList" 
				:key="index" 
				:text="item.text" 
				:icon="item.iconPath"
				:name="item.pagePath" 
				@click="click_page"
				>
				</u-tabbar-item>
				
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		props: {
			currentPagePath: String,
		},
		computed: {
			...mapGetters(['tabBerList'])
		},
		methods: {
			click_page(arg) {
				console.log('arg',arg);
				let page = '/' + arg
				uni.switchTab({
					url: page,
					success: function(res) {
						console.log(res);
						console.log('succcess');
					},
					fail: function(res) {
						console.log('fail');
						console.log(res);