4.5 导航组件

导航组件<navigator>用于单击跳转页面链接，其对应的属性如表4-40所示。

表4-40 navigator组件属性

其中open-type属性对应的5种取值如表4-41所示。

表4-41 open-type属性

例如：

上述代码表示在导航组件<navigator>中内嵌按钮组件<button>来实现跳转功能。当前<navigator>组件并未声明open-type属性，因此表示默认情况，即跳转新页面打开new.wxml。

如果需要传递数据给新页面，<navigator>组件的url属性值可以使用如下格式

<navigator url="跳转的新页面地址?参数1=值1&参数2=值2&…参数N=值N">

其中参数名称可以由开发者自定义，参数个数为一个至若干个均可，多个参数之间使用&符号隔开。例如：

上述代码表示在打开新页面的同时传递了date=20180803这条数据给新页面使用。

在新页面JS文件的onLoad()函数中可以获取到该参数，代码如下：

【例4-21】　导航组件navigator的简单应用

主页面WXML（pages/demo04/navigator/navigator.wxml）的代码片段如下：

视频讲解

新页面新内容的WXML（pages/demo04/new/new.wxml）的代码片段如下：

<text>新窗口打开的新页面，可以返回navigator.wxml</text>

当前页面新内容的WXML（pages/demo04/redirect/redirect.wxml）的代码片段如下：

<text>重定向的新页面，无法返回navigator.wxml</text>

运行效果如图4-35所示。

图4-35 导航组件navigator的简单应用

【代码说明】

本示例共有3个页面，即初始页面navigator.wxml、新页面内容new.wxml、重定向内容redirect.wxml。在初始页面使用了两个<navigator>组件分别用于打开new.wxml和redirect.wxml。由图4-35可见，新页面打开的新内容可以返回初始页面，相当于在初始页面上方又覆盖了一层新页面；而重定向打开的新内容是无法返回初始页面的，相当于直接替换掉了初始页面的内容。