uni-app学习笔记2(路由、界面跳转、携带参数)

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

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

目录

一、创建界面，配置路由

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

3、参数获取

4、效果展示

---

一、创建界面，配置路由

1、创建两个界面，分别为homeList.vue和myList.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"
	}
}

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

扫描二维码关注公众号，回复： 11579618 查看本文章

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

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("调用完成")}
	});
}

参数	类型	必填	默认值	说明	平台差异说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数	:-
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

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、效果展示