uniapp 声明式导航、编程式导航、传参、跳转动画

声明式导航以及传参
	内容
	
		 open-type
			navigate 	栈跳转,不写默认为该方式
			redirect 	 删除当前页面，跳转另一页面
			switchTab 	 	跳转到tabBar设置的页面,必须使用该方式
			navigateBack 	 返回上一个页面
			exit 	退出小程序，target="miniProgram"时生效 	

编程式导航以及传参
	在回调中
		uni.navigateTo({url:"/页面注册路径?url参数键值对"},success:成功回调)
		uni.redirectTo 删除当前页面，跳转另一页面
		uni.switchTab  跳转到tabBar设置的页面,必须使用该方式
		uni.navigateBack 返回上一个页面

接收参数
	在页面中,使用页面生命周期函数
	onLoad(option)
	{
		option.键名,获取对应参数
	}

声明式导航
跳转动画
编程式导航

代码示例:
跳转页面:

<template>
	<view>
		<view class='box'>
			
		</view>
		
		<view>
			<navigator url='/pages/detail/detail?id=80'>详情</navigator>
			<navigator url='/pages/me/me' open-type="switchTab">me</navigator>
			<navigator url='/pages/detail/detail' open-type="redirect">详情</navigator>
			<navigator url='/pages/detail/detail' open-type="navigateBack">详情</navigator>
		</view>
		<button type="primary" @click="get">按钮</button>
		<button type='primary' @click='set'>按钮2</button>
		<button type='primary' @click='remv'>按钮3</button>
	</view>
</template>

<script>
export default{
	data()
	{
		return{
			imgArr:['a']
		}
	},
	methods:{
		get()
		{
			uni.navigateTo({
				url:"/pages/detail/detail?id=120"
			})
		},
		set()
		{
			uni.switchTab({
				url:'/pages/me/me'
			})
		},
		remv()
		{
			uni.redirectTo({
				url:"/pages/detail/detail"
			})
		}
	},

		onLoad()
		{
			// #ifdef H5
				console.log("h5")
			// #endif
			// #ifdef MP-WEIXIN
				console.log("小程序")
			// #endif
			
		}


}
</script>

<style scoped>
	@import url("../css/a.css");
	.box{

		height: 375rpx;
		width: 375rpx;
		/* #ifdef H5 */
		background-color: #4CD964;
		/* #endif */
		/* #ifdef APP-PLUS */
		background-color: #007AFF;
		/* #endif */
	}

	.box1{
		background-color: #007AFF;
	}
</style>

接收参数页面:

<template>
	<view>detail
	{{msg}}
	</view>
	
</template>

<script>
export default{
	
data()
{
	return{
		msg:''
	}
},
onLoad(options)
{
	this.msg=options.id;
}
	
}
</script>

<style>
</style>