普歌 智音团队 uni-app路由跳转的两种方式

uni-app的两种路由跳转的方式

一.生命周期式导航
详细文档浏览：https://uniapp.dcloud.io/component/navigator
1.navigator 标签


案例

<navigator url="../detail/detail">跳转至详情页</navigator>
		<!-- 跳转到tabBar页面 得加open-type="switchTab" -->
		<navigator url="../message/message" open-type="switchTab">跳转到massage</navigator>
		<!-- 进来之后没有返回箭头 -->
		<navigator url="../detail/detail" open-type="redirect">跳转到详情页</navigator>

2.编程式导航
详细文档请浏览：https://uniapp.dcloud.io/api/router?id=switchtab
1.uni.navigateTo(object)

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

2.uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

3.uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。

案例

<!-- 编程式导航 -->
		<button @click="goDetail">跳转到详情页</button>
		<!--  跳转到tabbar页面-->
		<button @click="gomessage">跳转到tabbar页面</button>
		<button @click="goDetail2">跳转到详情页面并且关闭当前页面</button>

methods:{
		goDetail(){
			uni.navigateTo({
			url:"../detail/detail",
			animationDuration:1000
			})
		},
		gomessage(){
			uni.switchTab({
				url:"../message/message"
			})
		},
		goDetail2(){
			uni.redirectTo({
				url:"../detail/detail"
			})
		}
	}	

相关内容请浏览《uni-app路由跳转》

作者：lihaijin8090
本文源自：lihaijin8090的《普歌 智音团队 uni-app路由跳转的两种方式》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。