在小程序开发中，页面导航是实现用户流畅交互体验的关键环节。今天，咱们就一起来深入学习小程序里通过声明式导航实现页面跳转、切换 tab 页、后退等功能的技巧，还会附上详细代码示例，让大家轻松掌握！

一、什么是页面导航

页面导航，简单来说，就是实现页面之间相互跳转的技术。在浏览器中，我们常用 a 链接或者调用 JavaScript 的location.href API 来完成页面跳转。而在小程序里，实现页面导航主要有两种方式：声明式导航和编程式导航。

声明式导航，就是在页面上声明一个navigator导航组件，通过点击这个组件来实现页面跳转。编程式导航则是调用小程序提供的导航 API 来实现跳转。今天咱们重点探讨声明式导航的具体应用。

二、通过声明式导航跳转到 tab 页面

（一）tab 页面的概念

tab 页面指的是被配置为 tab bar 的那些页面。比如在当前项目中，配置了首页、消息、联系这三个页面作为 tab 页面。接下来，我们就看看如何从一个页面跳转到这些 tab 页面。

（二）实现步骤及代码示例

要通过声明式导航跳转到 tab 页面，需要借助navigator组件，并指定url属性和open-type属性。url属性表示要跳转到的页面地址，必须以斜线根路径开头；open-type属性表示跳转方式，若要跳转到 tab bar 对应的页面，其值必须等于switchTab。

假设我们要在首页点击一个链接跳转到消息页面，代码如下：

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面
</navigator>

在实际操作时，url路径可以从app.json文件中查找对应页面的路径，然后手动在前面加上斜线。如果忘记声明open-type属性及其对应值，或者url地址不以斜线开头，都无法成功跳转。

三、通过声明式导航跳转到非 tab 页面

（一）非 tab 页面的定义

非 tab 页面就是没有被配置为 tab bar 的页面。例如，我们在项目中新建一个info页面，且不将其配置为 tab 页面，那么它就是非 tab 页面。

（二）实现方式及代码演示

同样使用navigator组件，指定url属性和open-type属性。url属性依旧指定跳转地址，以斜线开头；open-type属性的值要等于navigate。代码如下：

<navigator url="/pages/info/info" open-type="navigate">导航到info页面
</navigator>

在实际开发中，还有个小技巧：导航到非 tab 页面时，open-type="navigate"这个属性可以省略不写，只指定url属性也能正常导航到非 tab 页面。

四、通过声明式导航实现后退效果

（一）后退导航的属性设置

如果希望后退到上一页面或后退多个页面，需要为navigator组件指定open-type属性和delta属性。open-type的值必须等于navigateBack，表示进行后退导航；delta属性的值是一个整数，表示要后退的层级数 。
比如，在页面上声明一个返回上一页的按钮，代码如下：

<navigator open-type="navigateBack" delta="1">返回上一页
</navigator>

（二）简化操作

如果只是后退到上一个页面，delta属性可以省略，因为其默认值为 1。只需要指定open-type="navigateBack"，就能实现后退一个页面的效果。