uniapp-路由和传参

页面路由

路由跳转方式

分为 navigator组件跳转和调用api跳转。

组件： navigator

<navigator url="../search/search" hover-class="navigator-hover">
   					button type="default">跳转到新页面</button>
</navigator>
----------------------------------------------------
<navigator url="/pages/search/search" hover-class="navigator-hover">
  <button type="default">跳转到新页面</button>
</navigator>

navigator可以通过open-type指定跳转方式

例如：

<navigator url="/pages/search/search" hover-class="navigator-hover" open-type="redirect">
	<button type="default">跳转到新页面</button>
</navigator>

ApI: navigateTo, redirectTo,navigateBack,switchTab

uni.navigateTo(obj)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
主要属性：url必须是应用内非 tabBar 的页面的路径

	<button @click="cli">跳转</button>
	<script>
	export default {
		methods: {
           cli(){
			   uni.navigateTo({
			   	url: '/pages/search/search'
			   });
		   }
		}
	}
</script>

navigateBack（obj）

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。只能返回由navigateTo跳转过来的

	<button @click="cli">返回</button>
	<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(option) {
			 console.log(option)
		},
		methods:{
			cli(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

redirectTo(obj)

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

	<button @click="redirect">跳转</button>
<script>
	export default {
		methods: {
		   redirect(){
			   uni.redirectTo({
			   	url:"/pages/search/search"
			   })
		   }
		}
	}
</script>

reLaunch(obj)

关闭所有页面，打开到应用内的某个页面，可以跳转到 tabBar 页面。

<button @click="lanch">reLaunch跳转</button>
<script>
	export default {
		methods: {
		   lanch(){
			   uni.reLaunch({
			   	url:"/pages/search/search"
			   })
		   }
		}
	}
</script>

页面间的通信

传参到跳转的页面：

//以navigateTo为例，跳转到search页面
<script>
   export default {
   	methods: {
          cli(){
   		   uni.navigateTo({
   		     	url: '/pages/search/search?id=10'
   		   });
   	   },
   	}
   }
</script>

search页面

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(option) {
			 console.log(option)  //{id: '10'}
		},/
	}
</script>

vue3中可以通过props来获取页面传递的参数

eventChannel 通过信道传输

只适用于navigateTo，可以向跳转的页面传输数据。

//传递参数
<script>
   export default {
   	methods: {
          cli(){
   		   uni.navigateTo({
   		   	url: '/pages/search/search?id=10',
   			success(res) {
   				  res.eventChannel.emit("accept",{
   					data:"传递的参数",
   					id:10
   				})
   			}
   		   });
   	   },
   	}
   }
</script>

接收参数

<script>
	export default {
		onLoad(option) {
			 console.log(option)
			 const eventChannel =  this.getOpenerEventChannel()
			 eventChannel.on('accept',(data)=>{
				  console.log('接收到来自index的参数',data) //接收到来自index的参数 {data: '传递的参数', id: 10}
			 })
		},
	}
</script>

events 被打开的页面向当前页面传参

当跳转到search页面时，参数会传递给index页面

<script>
	export default {
		methods: {
           cli(){
			   uni.navigateTo({
			   	url: '/pages/search/search?id=10',
				events:{
					 acceptDataFromSearch(data){
						 console.log('接收来自search的data:'+data)
						 //接收来自search的data:index.vue:72 {id: 10, name: 'sss'}
					 }
				}
			   });
		   },
		}
	}
</script>

// 把参数传递给 index

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(option) {
			 const eventChannel =  this.getOpenerEventChannel()
			  eventChannel.emit('acceptDataFromSearch',{
				  id:10,
				  name:"sss"
			  })
		},
		methods:{
			cli(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

事件总线

<script>
	export default {
		methods: {
           cli(){
			   uni.navigateTo({
			   	url: '/pages/search/search?id=10',
			   });
			  uni.$emit('test',{ data:"test"})
		   },
		}
	}
</script>

//在跳转页面获取传递的参数

	export default {
		onLoad(option) {
			  uni.$on('test',(value)=>{
				   console.log(value)
			  })
		},
		//移除
        onUnload() {
			uni.$off('test',(value)=>{
				   console.log(value)
			  })
		}
		methods:{
			cli(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

主要的通信方式总结：

在setup形式中 使用路由和路由的传参方式

navigateTo

<script setup>
  const cli =()=>{
	uni.navigateTo({
		url:'/pages/search/search?id=10&name="xxx"'
	})
  }
	
</script>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
   onLoad((options)=>{
	   console.log(options)
     })
 // 使用props接收参数也行
 const props =  defineProps(['id','name'])
 console.log(props)
</script>

eventChannel 通过信道传输

	uni.navigateTo({
		url:'/pages/search/search',
		success(res) {
			res.eventChannel.emit('accept',{
				data:{
					id:11,
					name:"xxx"
				},
				age:19
			})
		}
	})

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import { getCurrentInstance, ref } from "vue";
//getCurrentInstance可以获取组件内部组件实例，getCurrentInstance().proxy相当于this
   const $instance =ref(getCurrentInstance().proxy)
   onLoad((options)=>{
	    const  eventChannel = $instance.value.getOpenerEventChannel()
		eventChannel.on('accept',(value)=>{
			console.log(value)
		})
     })

</script>

events 被打开的页面向当前页面传参

	uni.navigateTo({
		url:'/pages/search/search',
		success(res) {
		},
		events:{
			accept1(value){
				console.log("从search传过来的参数:",value)
			}
		}
	})

 const cli=()=>{
		 uni.navigateBack({
			 delta:1
		 })
		  const  eventChannel = $instance.value.getOpenerEventChannel()
		  eventChannel.emit('accept1',{
			  data:"ttt",
			  name:"11"
		  })
	 }

事件总线

import {onLoad,onUnload} from '@dcloudio/uni-app'
  const cli =()=>{
	uni.navigateTo({
		url:'/pages/search/search',
	})
	uni.$emit('test',{
		 data:"test"
	})
		
  }

   onLoad((options)=>{
	     uni.$on('test',(value)=>{
			 console.log(value)
		 })
     })
	
	onUnload(()=>{
		uni.$off('test',(value)=>{
			console.log(value)
		})
	})