Taro-02-页面路由

React Router

<Route
  path="/user"
  element={<User />}
/>

路由动态注册。

---

Taro

路由配置在 app.config.ts

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/user/index'
  ]
})

页面必须提前声明。

---

页面目录

src
 ├─ pages
 │   ├─ index
 │   │   ├─ index.tsx
 │   │   └─ index.config.ts
 │
 │   └─ user
 │       ├─ index.tsx
 │       └─ index.config.ts

• app.config.ts 的 window：全局默认
• 每个路由的配置文件：只作用于 当前路由，若某个属性与全局配置冲突会覆盖

1. 导航栏 / 窗口外观（CommonConfig，页面和全局都能用）

字段	说明
navigationBarTitleText	导航栏标题
navigationBarBackgroundColor	导航栏背景色
navigationBarTextStyle	标题颜色 black / white
navigationStyle	default 或 custom（自定义导航栏）
backgroundColor	窗口背景色
backgroundTextStyle	下拉 loading 样式 dark / light
enablePullDownRefresh	是否开启下拉刷新
onReachBottomDistance	触底距离（px）
pageOrientation	屏幕方向 auto / portrait / landscape

2. 页面专属（PageConfig 独有）

字段	说明
disableScroll	禁止页面上下滚动（只能写在页面配置）
usingWindowScroll	是否用整页滚动（仅 H5）
enableShareAppMessage	开启分享给好友
enableShareTimeline	开启分享到朋友圈
enablePageMeta	是否使用 <page-meta> / <navigation-bar>
usingComponents	页面级自定义组件
renderer	渲染后端 webview / skyline
styleIsolation	样式隔离策略

---

页面跳转

React：

navigate('/user')

---

Taro：

import Taro from '@tarojs/taro';

Taro.navigateTo({
  url: '/pages/user/index'
});

返回：

Taro.navigateBack();

---

路由传参

React：

navigate('/user?id=1')

---

Taro：

Taro.navigateTo({
  url: '/pages/user/index?id=1'
});

接收：

1. 组件顶层

// 必须在函数组件顶层调用，遵守 React Hooks 规则
// 页面第一次进入并渲染时就有值
// 适合：用 router.params 做首屏渲染（标题、默认值、条件展示等）

const router = useRouter();        // 首次 render 快照（静态）
const router = useRouter(true);    // 始终读 Current.router（动态）

console.log(router.params.id);

2. 页面加载完成时（useLoad）------更常用于副作用

useLoad((options) => {
  const id = options.id; // 和 router.params 一致
  // 在这里：请求接口、初始化状态、埋点等
});

3. 页面再次显示时（useDidShow）

从别的页 navigateBack 回来，或同一页被复用且参数可能变了时，若只在首次 render 读一次可能不够，可在 useDidShow 里再读：

useDidShow(() => {
  const { params } = Taro.getCurrentInstance().router!;
  // 或 useRouter(true) 开启动态更新（见下）
});

---

页面栈

---

navigateTo

压栈

A
 ↓
B

页面栈：

[A,B]

返回：

Taro.navigateBack();

---

redirectTo

替换当前页面

A
 ↓
B

变：

[B]

---

switchTab

跳 TabBar

Taro.switchTab({
  url:'/pages/home/index'
})

变：

[home]

要点： switchTab 不会把 Tab 页「压栈」，而是切换 Tab + 清理非 Tab 页。栈里最多只会剩 TabBar 页面，只会出现 [Tab1,Tab2] 这种混合栈。

---

reLaunch

清空所有页面

Taro.reLaunch({
  url:'/pages/login/index'
})

变：

[login]

用于：

登录成功
退出登录
切换租户

要点： reLaunch 是最彻底的重置，不管目标是 Tab 还是普通页，结果都是单页栈。之后不能用 navigateBack 回到之前的页面。