uni-app之 声明式导航，编程式导航

uni-app之 声明式导航

uni-app之 声明式导航 跳转

• 官网：官网

跳转到普通页面

		<navigator url="../detail/detail">跳转到详情</navigator>
		<navigator url="../test/test">跳转到test</navigator>

跳转到 tabbar页面

• 需要添加这个属性：open-type="switchTab"

		<navigator url="../index/index" open-type="switchTab">跳转到首页</navigator>
		<navigator url="../about/about" open-type="switchTab">跳转到about</navigator>

open-type 相关值

redirect

• redirect
  • 就是关闭当前页面（页面已卸载），然后跳转到url设置的页面，不存在上一个页面 记录

<navigator url="../detail/detail" open-type="redirect">跳转到详情</navigator>

• 效果
  

uni-app之 声明式导航 传参

url方法传递参数

<template>
	<view>
			<navigator url="../detail/detail?id=100&name=pink">跳转到详情</navigator>
<!-- 		<button @click="goDetail">跳转到详情</button>
		<button type="default" @click="goDetail2">跳转到详情</button> -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
		},
	}
</script>

• 效果
  

页面 拿到传递的参数数据

<template>
	<view>
		<view class="box3">
			我是box3 详情
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
		},
		onLoad(options){
			console.log("页面加载 options",options);
		}
	}
</script>

• 效果
  

uni-app之 编程式导航

uni-app之 编程式导航 跳转

• 官网

uni.navigateTo(OBJECT)

• 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<template>
	<view>
		<button @click="goDetail">跳转到详情</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"../detail/detail",
					animationType: 'pop-in',
				})
			},
		},
	}
</script>

• 效果
  • 跳转到详情页之中

uni.switchTab(OBJECT)

• 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

<template>
	<view>
		<view class="box3">
			我是box3 详情
		</view>
		<button type="default" @click="goAbout">跳转到about</button>
	</view>
</template>
<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
			goAbout(){
				uni.switchTab({
					url:"../about/about",
				})
			},
		},
		onUnload(){
			console.log("详情页 卸载");
		}
	}
</script>

• 效果

• 从详情页之中，点击跳转到 about，由于about为 tabbar组件的页面，然而详情页非 tabbar，所有会卸载非tabbar的页面

uni.redirectTo(OBJECT)

• 关闭当前页面，跳转到应用内的某个页面。

<template>
	<view>
		<button type="default" @click="goDetail2">跳转到详情</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
			goDetail2(){
				uni.redirectTo({
					url:"../detail/detail",
				})
			}
		},
		onUnload(){
			console.log("msg 卸载");
		}
	}
</script>

• 效果
  • 跳转到详情页的时候，当前msg页面会被关闭，也就是卸载了，会触发 onUnload 函数

编程式导航 传参

当前页面，跳转到下一个页面，传递参数值

<template>
	<view>
 		<button @click="goDetail">跳转到详情</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"../detail/detail?id=10&name=ppp"
				})
			}
		},
	}
</script>

• 效果
  

跳转到页面后，获取传递的参数

<template>
	<view>
		<view class="box3">
			我是box3 详情
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
			}
		},	
		methods: {
		},
		onLoad(options){
			console.log("页面加载-options", options);
		}
	}
</script>

• 效果