04-路由与页面导航

🗺 Taro+Vue3 入门（四）：路由与页面导航

系列导读：小程序路由与 Web 不同，所有页面必须预注册。本文教你配置路由、 页面跳转、参数传递、TabBar 和分包。

🚀 1. 五种导航方式

<script setup lang="ts">
import Taro from '@tarojs/taro'

// ① navigateTo — 跳转新页面（保留当前页）
function goDetail(id: string) {
  Taro.navigateTo({ url: `/pages/detail/index?id=${id}&from=list` })
}

// ② redirectTo — 替换当前页（不能返回）
function goHome() {
  Taro.redirectTo({ url: '/pages/index/index' })
}

// ③ switchTab — 切换 TabBar
function goMine() {
  Taro.switchTab({ url: '/pages/mine/index' })
}

// ④ reLaunch — 关闭所有页面重新打开
function logout() {
  Taro.reLaunch({ url: '/pages/login/index' })
}

// ⑤ navigateBack — 返回
function goBack() {
  Taro.navigateBack({ delta: 1 })
}
</script>

<template>
  <view>
    <button @tap="goDetail('123')">查看详情</button>
    <button @tap="goBack">返回</button>
  </view>
</template>

📨 2. 参数传递与接收

<!-- 详情页 接收参数 -->
<script setup lang="ts">
import { ref } from 'vue'
import { useLoad } from '@tarojs/taro'

const productId = ref('')
const fromPage = ref('')

useLoad((options) => {
  productId.value = options?.id || ''
  fromPage.value = options?.from || ''
  console.log(`来自 ${fromPage.value}，查看商品 ${productId.value}`)
  loadProductDetail(productId.value)
})
</script>

📑 3. TabBar + 分包配置

// src/app.config.ts
export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/list/index',
    'pages/cart/index',
    'pages/mine/index',
  ],
  subPackages: [
    {
      root: 'packageDetail',
      pages: ['pages/detail/index', 'pages/search/index'],
    },
  ],
  tabBar: {
    color: '#999',
    selectedColor: '#42b883',
    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/list.png', selectedIconPath: 'assets/tab/list-active.png' },
      { pagePath: 'pages/cart/index', text: '购物车',
        iconPath: 'assets/tab/cart.png', selectedIconPath: 'assets/tab/cart-active.png' },
      { pagePath: 'pages/mine/index', text: '我的',
        iconPath: 'assets/tab/mine.png', selectedIconPath: 'assets/tab/mine-active.png' },
    ],
  },
  preloadRule: {
    'pages/index/index': {
      network: 'all',
      packages: ['packageDetail'],
    },
  },
})

✅ 本篇小结 Checklist

• 掌握 5 种导航方式
• 会传递和接收页面参数
• 配置 TabBar 和分包

本文是「Taro+Vue3 入门」系列第 4 篇，共 10 篇。