![微信小程序开发零基础入门](https://wfqqreader-1252317822.image.myqcloud.com/cover/511/31794511/b_31794511.jpg)
4.5 导航组件
导航组件<navigator>用于单击跳转页面链接,其对应的属性如表4-40所示。
表4-40 navigator组件属性
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-T155_90813.jpg?sign=1739252079-NWyKsnpOeFCZUXfVVy3DGYnNpR8iiYqI-0-d6299a54d998a15d4c8bee57783bfcab)
其中open-type属性对应的5种取值如表4-41所示。
表4-41 open-type属性
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-T155_90814.jpg?sign=1739252079-5YA0jWuJLqCbPohPYDwprKb68sMKEM6x-0-bb6114f82c49e6d726eb1535c3274d82)
注意:上述等同功能的用法详见第11章“界面API”。
例如:
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P155_90815.jpg?sign=1739252079-PRolFrG2I8XZajb64EWifKWAPTTw5pYi-0-fb8a8bf13e01c5e5b8e405a3f5260466)
上述代码表示在导航组件<navigator>中内嵌按钮组件<button>来实现跳转功能。当前<navigator>组件并未声明open-type属性,因此表示默认情况,即跳转新页面打开new.wxml。
如果需要传递数据给新页面,<navigator>组件的url属性值可以使用如下格式
<navigator url="跳转的新页面地址?参数1=值1&参数2=值2&…参数N=值N">
其中参数名称可以由开发者自定义,参数个数为一个至若干个均可,多个参数之间使用&符号隔开。例如:
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P155_90816.jpg?sign=1739252079-icun2vpISZJcpk4EsOR3wT1M6TGFzltV-0-7ab4c6cc6fb7ec1307549e72f30b3988)
上述代码表示在打开新页面的同时传递了date=20180803这条数据给新页面使用。
在新页面JS文件的onLoad()函数中可以获取到该参数,代码如下:
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P156_90817.jpg?sign=1739252079-IfxduOT0WP6vW7CpCR5sqPnmk0qnCQIq-0-0689e22aea408a8194ae9c8685cd332b)
【例4-21】 导航组件navigator的简单应用
主页面WXML(pages/demo04/navigator/navigator.wxml)的代码片段如下:
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P156_24587.jpg?sign=1739252079-2iH5qGoREXpF5uUyXdujeT1kGqKBb5aN-0-c2894be040ffdc6aae7b7f19ce123a0e)
视频讲解
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P156_93295.jpg?sign=1739252079-AeIlbI1L8L5iiZUS0sDYool1ijbZrS3s-0-138a533819af569e33225b466a7c4dac)
新页面新内容的WXML(pages/demo04/new/new.wxml)的代码片段如下:
<text>新窗口打开的新页面,可以返回navigator.wxml</text>
当前页面新内容的WXML(pages/demo04/redirect/redirect.wxml)的代码片段如下:
<text>重定向的新页面,无法返回navigator.wxml</text>
运行效果如图4-35所示。
![](https://epubservercos.yuewen.com/9F9C46/17214368805516706/epubprivate/OEBPS/Images/Figure-P156_24579.jpg?sign=1739252079-4qNJDaJQmtJusgbbj9RtpjhDWBThj688-0-e701f9888994b23787e4c79840a02d1d)
图4-35 导航组件navigator的简单应用
【代码说明】
本示例共有3个页面,即初始页面navigator.wxml、新页面内容new.wxml、重定向内容redirect.wxml。在初始页面使用了两个<navigator>组件分别用于打开new.wxml和redirect.wxml。由图4-35可见,新页面打开的新内容可以返回初始页面,相当于在初始页面上方又覆盖了一层新页面;而重定向打开的新内容是无法返回初始页面的,相当于直接替换掉了初始页面的内容。