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>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='home'?'action text-green':'action text-gray'" @click="NavChange" data-cur="home">
				<view class='cuIcon-homefill'></view>设备监测
			</view>
			<view :class="PageCur=='history'?'action text-green':'action text-gray'" @click="NavChange" data-cur="history">
				<view class='cuIcon-peoplelist'></view>历史数据
			</view>
			<view :class="PageCur=='warndata'?'action text-green':'action text-gray'" @click="NavChange" data-cur="warndata">
				<view class='cuIcon-profile'></view>预警分析
			</view>
			<view :class="PageCur=='people'?'action text-green':'action text-gray'" @click="NavChange" data-cur="people">
				<view class='cuIcon-people'></view>操作记录
			</view>
			<view :class="PageCur=='camera'?'action text-green':'action text-gray'" @click="NavChange" data-cur="camera">
				<view class='cuIcon-camera'></view>视频监测
			</view>
		</view>
	</view>
</template>

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

<style>

</style>