top-window.uvue

<template>
	<view class="top-window-header">
    <view class="left-header">
    	<navigator class="left-header" open-type="reLaunch" url="/pages/component/public-properties/public-properties">
    		<image src="/static/logo.png" class="logo" mode="heightFix"></image>
    		<text>hello uni-app</text>
    	</navigator>
    </view>
    <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
    	@onTabItemTap="toSecondMenu" />
	</view>
</template>

<script lang="uts">
  type IndexPageItem = {
  	tabBar: string ;
  	index: string ;
  }
	export default {
		data() {
			return {
        selected: {
        	component: 0,
        	API: 1,
        	CSS: 2,
        	template: 3
        },
        current: 0,
        indexPage: [{
        	tabBar: '/pages/tabBar/component',
        	index: '/pages/component/public-properties/public-properties'
        }, {
        	tabBar: '/pages/tabBar/API',
        	index: '/pages/API/get-app/get-app'
        }, {
        	tabBar: '/pages/tabBar/CSS',
        	index: '/pages/CSS/layout/width'
        }, {
        	tabBar: '/pages/tabBar/template',
        	index: '/pages/template/long-list/long-list'
        }] as IndexPageItem[]
			}
		},
    watch: {
    	$route: {
    		immediate: true,
    		handler(newRoute) {
    			const width = uni.getSystemInfoSync().screenWidth
    			if (width >= 768) {
    				let path = newRoute.path
    				let comp
    				if (path === '/') {
    					comp = 'component'
    					path = '/pages/component/public-properties/public-properties'
    				} else {
    					comp = path.split('/')[2]
    				}
    				this.current = this.selected[comp]
    				for (const item of this.indexPage) {
    					if (path === item.tabBar) {
    						uni.redirectTo({
    							url: item.index
    						})
    					}
    				}
    			}
    		}
    	}
    },
		methods: {
      toSecondMenu(e) {
      	const activeTabBar = '/' + e.pagePath
      	for (const item of this.indexPage) {
      		if (activeTabBar === item.tabBar) {
      			uni.redirectTo({
      				url: item.index
      			})
      		}
      	}
      }
		}
	}
</script>

<style>
	.top-window-header {
		height: 60px;
		padding: 0 15px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #e1e1e1;
		background-color: #FFFFFF;
	}
	.left-header {
		flex-direction: row;
		align-items: center;
		flex: 1;
	}
	.logo{
		height: 30px;
		width: 30px;
    margin-right: 8px;
	}
	.tab-bar-flex {
		width: 360px;
	}
</style>