uni-app的两种方式跳转和传参

一 官网

1 声明式跳转

http://uniapp.dcloud.io/component/navigator

2 编程式跳转

http://uniapp.dcloud.io/api/router?id=navigateto

http://uniapp.dcloud.io/api/router?id=switchtab

二 代码

1 新建 navigator.vue

<template>
	<view>
		<view>导航跳转的学习</view>
		<navigator url="/pages/detail/detail?name=cakin&age=19">跳转到详细页并传参</navigator>
		<navigator url="/pages/message/message" open-type="switchTab">跳转到信息页</navigator>
		<!--  redirect：将当前页面关闭，再进入下一个页面,如果不加，还会返回到当前页面-->
		<navigator url="/pages/detail/detail" open-type="redirect">跳转到详细页</navigator>
		<button @click="goDetail">跳转到详情页</button>
		<button @click="goMessage" type="primary">跳转到信息页</button>
		<button @click="goDetail1" type="warn">跳转到详情页,并关闭当前页</button>
	</view>
</template>

<script>
	export default {
		onUnload() {
			/* 用来测试 redirect*/
			console.log('导航页面卸载了')
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: '/pages/detail/detail'
				});
			},
			goDetail1(){
				uni.redirectTo({
					url: '/pages/detail/detail'
				})
			},
			goMessage() {
				uni.switchTab({
					url:'/pages/message/message'
				})
			}
		}
	}
</script>

<style>
</style>

2 修改detail.vue

<template>
	<view>
		<view>
			<text>唱歌跳舞打篮球</text>
		</view>
		<view>
			<text selectable>唱歌跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="ensp">唱歌 跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="emsp">唱歌 跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="nbsp" style="font-size: 40px;">唱歌 跳舞打篮球</text>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad(param) {
			console.log(param)
		},
	}
</script>
<style>
</style>

三 效果

1 导航展示

2 传参