页面跳转

目录

• 组件跳转（声明式导航）
  • navigator组件实现跳转
  • js跳转（编程式导航）

 

---

回到顶部

组件跳转（声明式导航）

navigator组件实现跳转

注意navigator的url前面要加上斜杆

<navigator url="/pages/login/login">
  <button type="primary" plain>去登录</button>
</navigator>

open-type的属性值

1. navigate（默认值）

• 作用：跳转到非 TabBar 页面，保留当前页面，跳转后可以返回上一页。

<navigator url="/pages/targetPage/targetPage" open-type="navigate">
  跳转到目标页面
</navigator>

• 注意：

  • 跳转的页面路径需要在 app.json 中配置。

  • 不能跳转到 TabBar 页面。

2. redirect

• 作用：关闭当前页面，跳转到非 TabBar 页面，无法返回上一页。

• <navigator url="/pages/targetPage/targetPage" open-type="redirect">
    重定向到目标页面
  </navigator>

3. switchTab

• 作用：跳转到 TabBar 页面，并关闭其他所有非 TabBar 页面。

• <navigator url="/pages/index/index" open-type="switchTab">
    切换到首页
  </navigator>

  注意：

  • 跳转的页面必须是 app.json 中 tabBar 配置的页面之一。

  • 无法传递参数。

4. reLaunch

• 作用：关闭所有页面，跳转到应用内的某个页面。

<navigator url="/pages/targetPage/targetPage" open-type="reLaunch">
  重新启动到目标页面
</navigator>

• 注意：

  • 跳转的页面路径需要在 app.json 中配置。

  • 会关闭所有页面，包括 TabBar 页面。

5.navigateBack

• 作用：关闭当前页面，返回上一页面或多级页面。

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

  • 参数：

    • delta：返回的页面层数，默认为 1。

• 注意：

  • 不需要指定 url。

  • 如果 delta 大于现有页面栈深度，则返回到首页。

js跳转（编程式导航）