uniapp路由与页面跳转详解:API调用与Navigator组件实战

UniApp路由与页面跳转详解:API调用与Navigator组件实战

路由

uniapp页面路由为框架统一管理,开发者需要在page.json里面配置每个路由页面的路径及页面样式。

路由跳转

uniapp有两种页面路由跳转方式,调用API跳转和navigator组件跳转。

调用API跳转

javascript 复制代码
navTo(){
	/* 跳转到非tabbar页面 */
	uni.navigateTo({
		url:"/pages/auth/login",// 目标页面,注意:页面要在 pages.json 的 pages 数组中配置了
		animationType: "slide-in-bottom", // 打开页面动画,仅App支持。当前 从下往上 打开
		 animationDuration: 300, // 窗口动画持续时间,单位为 ms, 默认300ms
	})
},

效果:

传递参数,对应页面结束获取参数,通过onloadoption获取:

传递:

javascript 复制代码
methods: {
			navTo(){
				/* 跳转到非tabbar页面 */
				uni.navigateTo({
					url:"/pages/auth/login?id=1&name=wuyong",// 目标页面,注意:页面要在 pages.json 的 pages 数组中配置了
					animationType: "slide-in-bottom", // 打开页面动画,仅App支持。当前 从下往上 打开
					 animationDuration: 1000, // 窗口动画持续时间,单位为 ms, 默认300ms
				})
			},
		}

接收:

javascript 复制代码
<template>
	<view>
		登录页面
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad(option) {
			//通过option接受其他页面带过来的参数
			console.log("id",option)
			console.log("name",option.name)
		},
		methods: {}
	}
</script>

<style>

</style>

效果:

传递对象

传参:

javascript 复制代码
methods: {
navTo(){
		const params = {id: 1, name: 'wuyong'}
		uni.navigateTo({
		 url: '/pages/auth/login?params=' + JSON.stringify(params)
		})

	},
}

接收参数:

javascript 复制代码
onLoad(option) {
 const params = JSON.parse( option.params )
 console.log(params.id, params.name)
},

效果:

url有长度限制,太长的字符串会传递失败,使用encodeURIComponent方式解决:

传参,通过encodeURIComponent进行编码:

javascript 复制代码
navTo(){
	// 3. url有长度限制,太长的字符串会传递失败,使用encodeURIComponent方式解决:
	const params = {id: 1, name: 'wuyong', desc: 'xxxxxxxxxx'}
	uni.navigateTo({
	 url: '/pages/auth/login?params=' + encodeURIComponent(JSON.stringify(params))
	})
},

接收参数,通过decodeURIComponent解码:

javascript 复制代码
// login.vue 页面接收参数
onLoad (option) {
 const params = JSON.parse(decodeURIComponent(option.params))
 console.log(params.id, params.name, params.desc)
},

效果:

uni.redirectTo()重定向页面,关闭当前页面,跳转到应用内的某个页面,返回不到原页面。

注意:跳转到tabBar页面只能使用switchTab跳转。

javascript 复制代码
methods: {
	toOrderPage(){
		const params = {id:1,name:'wuyong'}
		uni.redirectTo({
			url:'/pages/order/order?params='+JSON.stringify(params)
		})
	}
}

接收跳转过来携带的参数:

javascript 复制代码
onLoad(option) {
	const params = JSON.parse(option.params)
	console.log(params.id,params.name)
},

效果:

uni.reLaunch(Obj):关闭所有页面,打开到应用内的某个页面,导航<后退按钮,无法后退,跳转到目的也,无后退按钮。

跳转:

javascript 复制代码
methods: {
	toOrderPage(){
		const params = {id:1,name:'wuyong'}
		uni.reLaunch({
			url:'/pages/order/order?params='+JSON.stringify(params)
		})
	}
}

接收:

javascript 复制代码
onLoad(option) {
	const params = JSON.parse(option.params)
	console.log(params.id,params.name)
},

效果:无后退按钮

uni.switchTab(Object) :跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

javascript 复制代码
// index.vue 页面
 methods: {
	 // 跳转分类标签页
	 toCategoryPage() {
		 uni.switchTab({
			 url: '/pages/category/category'
		 })
	 }
 }

uni.navigateBack(Object) :关闭当前页面,返回上一页面或多级页面。

javascript 复制代码
uni.navigateBack({
 delta: 1 // 返回的页面数, 1后退上一页面
 animationType: 'slide-out-bottom', // 后退动画
 animationDuration: 300
})

效果:

使用navigator 组件类似HTML中的<a>标签,但只能跳转到本地页面,目标页面必须在pages.json中注册

方式一

javascript 复制代码
<navigator :url="'/pages/auth/login?params='+encodeURIComponent(JSON.stringify({id:1,name:'wuyong',desc: 'xxxxxxxxxx'}))">
	<button type="default">登录</button>
</navigator>

效果:

方式二、

javascript 复制代码
<navigator url="/pages/order/order" open-type="redirect">
	<button type="default">订单</button>
</navigator>

效果:

方式三、

javascript 复制代码
<navigator url="/pages/category/index" hover-class="red-hover" open-type="switchTab" hover-stay-time="1000">
	<view type="default">分类</view>
</navigator>

效果:

项目开发中常用跳转完结~

相关推荐
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index2 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情9 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00712 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字12 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔13 小时前
uniapp rpx兼容平板
uni-app
荔枝吖13 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗13 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141615 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子1 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测