uni-app 有两种页面路由跳转方式:使用navigator组件跳转(一般用作tabBar导航)、调用API跳转(一般用作界面打开),需要把界面在路由中注册。

官方文档:https://uniapp.dcloud.io/api/router?id=navigateto

目录

一、创建界面,配置路由

二、界面的跳转与携带参数、参数获取 

3、参数获取

4、效果展示


 

一、创建界面,配置路由

1、创建两个界面,分别为homeList.vuemyList.vue

2、打开pages.json配置文件,添加如下配置(注意路径)

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-ui基础项目"
		}
	},{
		"path": "pages/home/homeList",
		"style": {
			"navigationBarTitleText": "主页"
		}
	},{
		"path": "pages/my/myList",
		"style": {
			"navigationBarTitleText": "个人中心"
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	}
}

路由配置完成就可以进行界面跳转。

二、界面的跳转与携带参数、参数获取 

1、navigator跳转

<navigator url="/pages/my/myList?title=navigate" open-type="navigate" hover-class="navigator-hover">
	<button type="default">跳转到个人中心</button>
</navigator>

url:跳转路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数。

 2、API跳转

 事件触发,方法中使用uni.navigateTo({})进行跳转

toHomeList(e) {
	console.log(e);
	let data={
		'name':'zy',
		'age':23
	}
	uni.navigateTo({
		url: "/pages/home/homeList?data="+encodeURIComponent(JSON.stringify(data)),
		// url:"../component/classdetails/classdetails?newsid="+ newsid,
		success: res => {console.log("调用成功")},
		fail: () => {console.log("调用失败")},
		complete: () => {console.log("调用完成")}
	});
}

 

参数类型必填默认值说明平台差异说明
urlString 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数:-
animationTypeStringpop-in窗口显示的动画效果,详见:窗口动画App
animationDurationNumber300窗口动画持续时间,单位为 msApp
successFunction 接口调用成功的回调函数 
failFunction 接口调用失败的回调函数 
completeFunction 接口调用结束的回调函数(调用成功、失败都会执行)

3、参数获取

在跳转后的界面中,使用onLoad函数获取

onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }

 url有长度限制,太长的字符串会传递失败,可使用窗体通信全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue页面接受参数
onLoad: function (option) {  //option为object类型,会序列化上个页面传递的参数
    const item = JSON.parse(decodeURIComponent(option.item));
}

4、效果展示

 

 

 

Logo

前往低代码交流专区

更多推荐