在前面的章节尽管介绍了很多 API 和组件，但所有的代码都放在了一个页面中（布局放在了 wxml 文件中， JS 代码写在了 js 文件中），然而，对于一个有实际应用价值的小程序，不可能只有一个页面，如果小程序中包含了多个页面，就需要从一个页面切换到另一个页面，这被称为页面导航。

要实现页面导航，需要使用 标签，该标签允许在当前页面显示另一个页面，也允许显示一个新页面。例如，下面的布局代码中使用了两个 标签。

<view style="margin:30px">
<navigator url="page1?title=跳转到新页面" >
<button >跳转到新页面button>
navigator>
<navigator style="margin-top:20px" url="page2?title=在当前页面打开&color=red" redirect >
<button >在当前页打开button>
navigator>?
view>

标签有一个非常重要的属性 url ，该属性用于指定要跳转的页面和要传递的值。这个 url 的格式类似于 web 地址。页面和参数之间用问号（ ? ）分隔，如果传递多个参数，参数之间用 & 分隔。其中 page1 和 page2 是与当前页面同一个目录下的页面。第二个 标签不仅通过 url 传递了 title 参数，还传递了一个 color 参数，用于设置 page2 中文本的颜色。在这个 标签中还指定了 redirect 属性，表示在当前页面中打开新页面，默认是在另一个页面中打开新页面。

现在选择当前页面的目录，然后单击鼠标右键，会弹出如图 1 所示的菜单。

图1 新建页面

现在新建 4 个文件： page1.wxml 、 page1.js 、 page2.wxml 和 page2.js 。这 4 个文件中的代码如下：

page1.wxml

<view style="margin:30px">
{{title}}
view>
page1.js
Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title
    })
  }
})

page2.wxml

<view style="margin:30px">
"color:{{color}}">{{title}}
view>
page2.js
Page({
  onLoad: function(options) {
    console.log(options)
    this.setData({
      title: options.title,
      color:options.color
    })
  }
})

从 page1.js 和 page2.js 文件中的代码可以看出，通过 onLoad 事件的 options 参数返回传入的参数（ title 和 color ），并将这两个参数值赋给 title 和 color 变量。

注意：新添加的页面，要在 app.json 文件的 pages 中注册，否则无法使用新建立的页面。注册代码如下：

"page/component/component-pages/wx-view/page1",
"page/component/component-pages/wx-view/page2",

现在点击第一个按钮，会跳转到如图 2 所示的页面，点击左上角的“返回”按钮，会返回到当前页面。

图2  在另一个页面显示新页面

点击第二个按钮，会跳转到如图 3 所示的页面，点击左上角的“返回”按钮，会返回到当前页面的上一个页面。

图3  在当前页面显示新页面