16.uniapp两种方式导航条转和传参

navogator.vue组件内容

<template>
	<view>
		<!-- 一. 声明式导航 -->
		<view>导航跳转的学习</view>
		<!-- 正常跳转 -->
		<navigator url="../detail/detail">跳转至详情页</navigator>
		
		<!-- 注意如果跳转tabbar页面的时候需要添加一个样式 	其他请款看文档-->
		<navigator url="../message/message" open-type="switchTab">跳转至信息页</navigator>
		
		<!-- open-type="redirect"意思就是点击进入详情页的是后不能返回上一个页面，如果不设置的话，左上角就有一	> 返回的按钮 -->
		<navigator url="../detail/detail" open-type="redirect">跳转至详情页</navigator>
		
		
		
		<!-- 二.编程式导航 -->
		<!-- 普通页面 -->
		<button @click="goDetail">跳转至详情页</button>
		
		<!-- 特殊tabbar 页面时-->
		<button @click="goMessage">跳转信息页</button>
		
		<!-- 跳转到详情页并关闭当前页面 -->
		<button type="primary" @click="redirectDetail()">跳转到详情页并关闭当前页面</button>
		
		
		<!-- 一.声明式导航传参 
		传给详情页id=80 	然后到detail页面		onUnload 方法接受	打印就收到了-->
		<navigator url="../detail/detail?id=80&age=19">跳转至详情页</navigator>
	</view>
</template>

<script>
	export default{
		methods:{
			// 二.编程式式导航传参 
			goDetail(){
				// 方法看文档API路由与页面跳转uni.navigateTo(OBJECT)		注意写在()里面地址和其他属性	是对象	加	{}!!!
				uni.navigateTo({
					url:'../detail/detail?id=100&age=20',
				})
			},
			goMessage(){
				uni.switchTab({
					url:'../message/message',
				})
			},
			redirectDetail(){
				uni.redirectTo({
					url:'../detail/detail',
				})
			}
	},
}	
</script>

<style>
</style>

detail.vue组件

<template>
		<view>
			详情页
		</view>
</template>

<script>
	export default{
		onLoad(options){				// 这个就是上个页面传的参数接受一个
			console.log(options);
		}
	}
</script>
<style>
</style>

message.vue组件

<template>
	<view>
		<button type="primary" @click="chooseImg">上传图片</button>
		<image v-for="item in imgArr" :src="item" mode="widthFix" @click="previewImg(item)"></image>
		<!-- 方法格式如下注释： 三部曲 -->
		<!--1. #ifdef + 平台值(看文档查看更多)	开头 -->
		<!--2. 内容部分 -->
		<!--3. #endif 	结尾 -->
		
		<!-- #ifdef H5 -->
		<view>我只在H5页面显示</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>我只在小程序页面显示页面显示</view>
		<!-- #endif -->
		
		<view class="box">按钮页特殊!！！</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			// 点击上传图片方法
			chooseImg(){
				uni.chooseImage({
					count: 5,
					 success: res => {			// 后台获取到后	再到data里面创建一个数组		到image标签里面循环这个数组依次显示出来
						this.imgArr = res.tempFilePaths
					}
				})
			},
			// 图片预览功能
			previewImg(current){
				console.log(current);
				uni.previewImage({
					current:current,
					urls:this.imgArr,
					loop:true,
					indicator:'number'
				})
			},
			// 添加一个方法	加载
			onLoad(){
				// #ifdef H5
				console.log('我只在H5页面打印');
				// #endif
				
				// #ifdef MP-WEIXIN
				console.log('我只在微信小程序里面打印');
				// #endif
				
			}
		}
	}
</script>

<style>
	/* H5页面的样式 */
	// #ifdef H5
	.box{
		width: 100rpx;
		height: 100rpx;
		background-color: #0000FF;
	}
	// #endif
	
	/* 微信小程序中的样式 */
	//	#ifdef MP-WEIXIN
	.box{
		width: 100rpx;
		height: 100rpx;
		background-color: #0000FF;
	}
	// #endif
</style>