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

灰太狼 2022-11-26 07:57 478阅读 0赞

> **`uni-app` 有两种页面路由跳转方式：使用[navigator][]组件跳转(一般用作**tabBar**导航)、调用[API][]跳转(一般用作界面打开)，需要把界面在路由中注册。**
> 
> **官方文档：**[https://uniapp.dcloud.io/api/router?id=navigateto][https_uniapp.dcloud.io_api_router_id_navigateto]

**目录**

一、创建界面，配置路由

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

3、参数获取

4、效果展示

--------------------

# 一、创建界面，配置路由 #

**1、创建两个界面，分别为homeList.vue和myList.vue**  
![20200811110108979.png][]

2、打开pages.json配置文件，添加如下配置(注意路径)  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

{
    	"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][]跳转**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1][]

<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][]跳转**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2][]

事件触发，方法中使用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("调用完成")}
    	});
    }

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

# 3、参数获取 #

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

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

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

// 在test.vue页面接受参数
    onLoad: function (option) {  //option为object类型，会序列化上个页面传递的参数
        const item = JSON.parse(decodeURIComponent(option.item));
    }

# 4、效果展示 #

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 3][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 4][] #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 5][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 6][]

[navigator]: https://uniapp.dcloud.io/component/navigator
[API]: https://uniapp.dcloud.io/api/router
[https_uniapp.dcloud.io_api_router_id_navigateto]: https://uniapp.dcloud.io/api/router?id=navigateto
[20200811110108979.png]: /images/20221124/46a245663771457998f2eb86af30fef5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: /images/20221124/0d9a8db90f56432199a3672872f13908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 1]: /images/20221124/cf396e90176c47c480fb8a5f0f8428aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 2]: /images/20221124/643ccb85b2e34d50a31fab04ceda9a9d.png
[Link 1]: https://uniapp.dcloud.io/collocation/frame/communication
[Link 2]: https://ask.dcloud.net.cn/article/35021
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200811112127439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 4]: /images/20221124/311e3d435cf54ba09b65bdf0ed00f0d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200811112214361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70 6]: /images/20221124/d0b1e1a7b0314e34a374cc02d54afff6.png