uni中的导航跳转

利用navigator进行跳转

• navigator
• navigator 跳转至tabbar页面的open-type属性详解

跳转至普通页面

<navigator url="../detail/detail?id=80&age=19">跳转至详情页，有返回</navigator> 

跳转至tabbar页面

<navigator url="../message/message" open-type="switchTab">跳转至信息页</navigator>
<navigator url="../detail/detail" open-type="redirect">跳转至详情页，无返回, 上一个页面已经销毁了</navigator>

利用编程式导航进行跳转

• 编程式导航跳转

//编程式导航，
<button @click="goDetail">跳转至详情页</button>
<button @click="goMessage">跳转至信息页（tabbar）</button>
		
<button type="primary" @click="redrectDetail">跳转到详情页并关闭当前页面</button>

利用navigateTo进行导航跳转

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

通过switchTab跳转到tabbar页面

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

利用redirectTo进行跳转

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

methods:{
			goDetail(){
				uni.navigateTo({
					url:"../detail/detail"
				})
			},
			goMessage(){
				uni.switchTab({//卸载所有非tabbar页面
					url:"../message/message"
				})
			},
			redrectDetail(){
				uni.redirectTo({
					url:"../detail/detail"
				})
			}
		}

通过onUnload测试当前组件确实卸载

• 和methods平级

onUnload() {
			console.log("导航页面卸载了")
		},

导航跳转参数传递

• 在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
• 传递参数界面(navigator.vue)

<navigator url="../detail/detail?id=80&age=19">跳转至详情页，有返回</navigator> 

• 参数接收界面(跳转后的界面 detail.vue)

<script>
	export default {
		onLoad(options) {
			console.log('页面加载了',options)
		},
	}
</script>