Navigator

Navigator 使用示例

下面通过一个简单的示例来演示如何在 Taro 中使用 Navigator 组件进行页面跳转。

import Taro from '@tarojs/taro'
import { View, Navigator } from '@tarojs/components'
 
export default function Example() {
  return (
    <View>
      {/* 普通页面跳转 */}
      <Navigator url='/pages/detail/index'>
        点击跳转到详情页
      </Navigator>
 
      {/* 带参数的页面跳转 */}
      <Navigator url='/pages/detail/index?id=123&type=abc'>
        带参数跳转到详情页
      </Navigator>
    </View>
  )
}

在上述示例中，Navigator 的 url 属性指定了目标页面路径，可以附加查询参数。

示例：利用 openType 实现不同跳转方式

<Navigator url='/pages/home/index' openType='redirect'>
  redirect 重定向首页
</Navigator>
<Navigator url='/pages/profile/index' openType='switchTab'>
  switchTab 切换底部导航页
</Navigator>
<Navigator url='/pages/login/index' openType='reLaunch'>
  reLaunch 重启并进入登录页
</Navigator>

Navigator 常用属性说明

• url: 跳转的路径，支持查询字符串。
• openType: 打开方式，支持值包括：
  • navigate（默认）：保留当前页面，跳转到应用内的某个页面。
  • redirect: 关闭当前页面，重定向到应用内的某个页面。
  • switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
  • reLaunch: 关闭所有页面，打开到应用内的某个页面。
  • exit: 退出小程序，仅限小程序端使用。
• hoverClass: 按下去的时候添加的样式类名。
• hoverStartTime / hoverStayTime: 按下后多少时间显示点击态及持续时长。