uniapp 中tab切换多个单页面跳转v-if 和 click点击事件配合web页面也适用

<template>
	<view class="page">
		<view class="content flex" >
			<!-- D -->
			<view class="left" >
				<view class="left_title" @click="linkA()">
					A标题
				</view>
				
				<view class="left_txt" v-if="type === 'A' ">
					A内容
				</view>
			</view>
			<!-- B -->
			<view class="center">
				<view class="center_title" @click="linkB()">
					B标题
				</view>
				<view class="center_txt" v-if="type === 'B' ">
					B内容
				</view>
			</view>
			<!-- C -->
			<view class="right">
				<view class="right_title" @click="linkC()">
					C标题
				</view>
				<view class="right_txt" v-if="type === 'C' ">
					C内容
				</view>
			</view>
			<!-- D -->
			<view class="D">
				<view class="D_title" @click="linkD()">
					D标题
				</view>
				<view class="D_txt" v-if="type === 'D' ">
					D内容
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				type: 'A'
			}
		},
		methods:{				//	两个页面跳转就用一个点击事件		多个页面跳转就要绑定每个页面都需要单独设置点击事件如下
			linkA(){
				this.type = 'A'
			},
			linkB(){
				this.type = 'B'
			},
			linkC(){
				this.type = 'C'
			},
			linkD(){
				this.type = 'D'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		.content{
			width: 100%;
			height: 300rpx;
			background-color: #999999;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.left{
				width: 25%;
				height: 100%;
				// background-color: #CC6699;
				border: 1rpx solid black;
				.left_title{
					width: 100%;
					height: 20%;
					// background-color: #FF9900;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
			.center{
				width: 25%;
				height: 100%;
				border: 1rpx solid black;
				.center_title{
					width: 100%;
					height: 20%;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
			.right{
				width: 25%;
				height: 100%;
				border: 1rpx solid black;
				.right_title{
					width: 100%;
					height: 20%;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
			.D{
				width: 25%;
				height: 100%;
				border: 1rpx solid black;
				.D_title{
					width: 100%;
					height: 20%;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
		}
	}
</style>