Vent-App/pages/index/index.vue

<template>
	<view>
		<home :cur="PageCur" v-if="PageCur=='home'" :key="commponent1Key"></home>
		<history :cur="PageCur" v-if="PageCur=='history'" :key="commponent2Key"></history>
		<warndata :cur="PageCur" v-if="PageCur=='warndata'" :key="commponent3Key"></warndata>
		<people v-if="PageCur=='people'" :key="commponent4Key"></people>
		<camera :cur="PageCur" v-if="PageCur=='camera'" :key="commponent5Key"></camera>
		<u-tabbar
			:value="PageCur"
			@change="name => PageCur = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="设备监测" name="home" icon="file-text" @click="NavChange('home')">
				<!-- <image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="https://cdn.uviewui.com/uview/common/bell-selected.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="https://cdn.uviewui.com/uview/common/bell.png"
				></image> -->
			</u-tabbar-item>
			<u-tabbar-item text="历史数据" icon="photo" name="history" @click="NavChange('history')" ></u-tabbar-item>
			<u-tabbar-item text="预警分析" icon="play-right" name="warndata" @click="NavChange('warndata')" ></u-tabbar-item>
			<u-tabbar-item text="操作记录" icon="account" name="people" @click="NavChange('people')" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
		return {
				PageCur: 'home',
				commponent1Key: 0,
				commponent2Key: 1,
				commponent3Key: 2,
				commponent4Key: 3,
				commponent5Key: 4,
			}
		},
		onLoad:function(){
			this.PageCur='home'
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
			
		}
	}
</script>

<style>

</style>