uniapp --页面之间的跳转以及数据传递

我们可以使用标签（组件）navigator 来实现页面路由的跳转，它类似于我们之前所使用的 a 标签，但它只能跳转本地页面并且目标页面必须在pages.json中注册

点击查看官网更多配置详情

如果只是简单的实现一些路由页面之间的跳转问题的话，我们只需要简单的使用 url 以及 open-type 属性

<template>
	<view class="view">
		<span>这是导航组件</span>
		<!-- 声明式导航 -->
		<navigator url="/pages/test_condition/test_condition">点击去往详情页</navigator>
		<!-- redirect 会把当前页面进行销毁之后再跳转对应的页面 -->
		<navigator url="/pages/test_condition/test_condition" open-type="redirect">去往详情页（2）</navigator>
		
		<navigator url="/pages/list/list" open-type="switchTab">点击去往列表页</navigator>
		
		<button @click="navMessage">点击去往详情页</button>
		<button @click="navList">点击跳转至列表页</button>
	</view>
</template>

<script>
	export default {
    
    
		onUnload(){
    
    
			console.log('导航页面销毁了')
		},
		methods:{
    
    
			// 去往详情页
			navMessage () {
    
    
				uni.navigateTo({
    
    
					url:"/pages/test_condition/test_condition?message=Hello&message2=uniapp"
				})
			},
			// 去往列表页
			navList () {
    
    
				uni.switchTab({
    
    
					url:"/pages/list/list"
				})
			}
		}
	}
	
</script>

<style>
</style>

<template>
	<view>
		<h1>{
    
    {
    
    this.message + this.message2}}</h1>
	</view>
</template>

<script>
	export default {
    
    
		data () {
    
    
			return{
    
    
				message:'',
				message2:''
			}
		},
		onLoad({
     
     message,message2}) {
    
    
			this.message = message
			this.message2 = message2
			console.log(message,message2)
		}
	}
</script>

<style>
	
</style>

上面的例子中也提到了，我们只要在路由后加上一些查询字符串，我们就可以实现数据的传递，传递方需要书写查询字符串，而接收方可以在组件加载完毕时进行数据的获取，也就是使用我们的 onLoad 生命周期函数