04-路由与页面导航

🗺 Taro 从零到一（四）：路由与页面导航

系列导读：小程序的路由机制与 Web 不同，所有页面必须预先注册。 本文教你 Taro 中的路由配置和页面跳转全技巧。

---

📋 1. 页面注册

// src/app.config.ts — 所有页面必须在这里注册
export default defineAppConfig({
  pages: [
    'pages/index/index',         // 第一个 = 首页
    'pages/list/index',
    'pages/detail/index',
    'pages/login/index',
    'pages/search/index',
    'pages/mine/index',
  ],
  // 分包配置（优化加载速度）
  subPackages: [
    {
      root: 'packageA',
      pages: [
        'pages/setting/index',
        'pages/about/index',
      ],
    },
  ],
})

---

🚀 2. 五种导航方式

import Taro from '@tarojs/taro'

// ① navigateTo — 跳转（保留当前页，可返回）
Taro.navigateTo({ url: '/pages/detail/index?id=123&name=Flutter' })

// ② redirectTo — 替换（关闭当前页，不可返回）
Taro.redirectTo({ url: '/pages/login/index' })

// ③ switchTab — 切换 Tab（只能跳转 tabBar 页面）
Taro.switchTab({ url: '/pages/index/index' })

// ④ reLaunch — 重启（关闭所有页面，打开新页面）
Taro.reLaunch({ url: '/pages/index/index' })

// ⑤ navigateBack — 返回
Taro.navigateBack()            // 返回上一页
Taro.navigateBack({ delta: 2 }) // 返回上两页

方法	效果	页面栈	使用场景
navigateTo	跳转新页面	新增一层	列表→详情
redirectTo	替换当前页	替换当前层	登录→首页
switchTab	切换 Tab	清空+切换	切换底部 Tab
reLaunch	关闭全部重新打开	只剩一层	退出登录
navigateBack	返回	弹出一层	返回上一页

---

📨 3. 参数传递

传参

// 通过 URL 参数传递
Taro.navigateTo({
  url: `/pages/detail/index?id=${product.id}&title=${encodeURIComponent(product.title)}`
})

// 复杂数据用事件通道
Taro.navigateTo({
  url: '/pages/detail/index',
  events: {
    // 监听详情页返回的数据
    onResult: (data) => {
      console.log('收到返回数据:', data)
    },
  },
  success: (res) => {
    // 向详情页发送数据
    res.eventChannel.emit('sendData', { product: complexObject })
  },
})

接收参数

// pages/detail/index.tsx
import { useLoad, getCurrentInstance } from '@tarojs/taro'

function DetailPage() {
  const [id, setId] = useState('')

  // 方式一：useLoad 获取参数
  useLoad((options) => {
    console.log('商品ID:', options.id)
    console.log('标题:', decodeURIComponent(options.title || ''))
    setId(options.id || '')
  })

  // 方式二：getCurrentInstance（任意时机获取）
  const instance = getCurrentInstance()
  const params = instance.router?.params

  // 接收事件通道数据
  useLoad(() => {
    const eventChannel = instance.page?.getOpenerEventChannel?.()
    eventChannel?.on('sendData', (data) => {
      console.log('收到数据:', data.product)
    })
  })

  // 返回数据给上一页
  const handleSubmit = () => {
    const eventChannel = instance.page?.getOpenerEventChannel?.()
    eventChannel?.emit('onResult', { selected: true })
    Taro.navigateBack()
  }

  return <View>详情页: {id}</View>
}

---

📑 4. TabBar 配置

// src/app.config.ts
export default defineAppConfig({
  tabBar: {
    color: '#999999',
    selectedColor: '#6366F1',
    backgroundColor: '#ffffff',
    borderStyle: 'white',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
        iconPath: 'assets/tab/home.png',
        selectedIconPath: 'assets/tab/home-active.png',
      },
      {
        pagePath: 'pages/list/index',
        text: '分类',
        iconPath: 'assets/tab/category.png',
        selectedIconPath: 'assets/tab/category-active.png',
      },
      {
        pagePath: 'pages/mine/index',
        text: '我的',
        iconPath: 'assets/tab/mine.png',
        selectedIconPath: 'assets/tab/mine-active.png',
      },
    ],
  },
})

⚠️ 注意：TabBar 页面只能用 switchTab 跳转，navigateTo 无法跳转到 TabBar 页面。

---

📦 5. 分包加载

// 分包可以减少首次加载体积
export default defineAppConfig({
  pages: [
    'pages/index/index',    // 主包（首次加载）
  ],
  subPackages: [
    {
      root: 'packageOrder',  // 订单分包
      pages: [
        'pages/order-list/index',
        'pages/order-detail/index',
      ],
    },
    {
      root: 'packageSetting', // 设置分包
      pages: [
        'pages/setting/index',
        'pages/about/index',
      ],
    },
  ],
  preloadRule: {
    'pages/index/index': {
      network: 'all',
      packages: ['packageOrder'],  // 进入首页时预加载订单包
    },
  },
})

// 跳转到分包页面
Taro.navigateTo({ url: '/packageOrder/pages/order-list/index' })

---

✅ 本篇小结 Checklist

• 掌握 app.config.ts 页面注册
• 区分 5 种导航方式（navigateTo / redirectTo / switchTab / reLaunch / navigateBack）
• 会传递和接收页面参数
• 配置 TabBar 底部导航
• 了解分包加载机制

---

下一篇预告：《样式与 UI 组件库（NutUI）》

---

本文是「Taro 从零到一」系列第 4 篇，共 10 篇。