微信小程序页面路由管理与传参技巧

# 2.1 页面路由的基本原理

### 2.1.1 页面栈和路由跳转

微信小程序采用页面栈管理页面路由。页面栈是一个后进先出的数据结构，每次打开一个新页面时，该页面都会被推入页面栈，而当关闭一个页面时，该页面将从页面栈中弹出。

页面跳转可以通过 `wx.navigateTo`、`wx.redirectTo` 和 `wx.switchTab` 等 API 实现。`wx.navigateTo` 会将新页面推入页面栈，而 `wx.redirectTo` 会将当前页面替换为新页面，并从页面栈中移除当前页面。`wx.switchTab` 用于在 tab 页之间进行切换，它会将当前 tab 页中的所有页面从页面栈中移除，并推入新的 tab 页的第一个页面。

### 2.1.2 路由参数的传递

在页面跳转时，可以通过 `url querystring` 或 `全局数据` 传递路由参数。`url querystring` 是附加在 URL 后面的参数字符串，格式为 `?key1=value1&key2=value2`。`全局数据` 是小程序中的一种共享数据，可以通过 `getApp()` 方法获取和设置。

传递路由参数时，需要考虑参数的类型和大小。对于简单的数据类型（如字符串、数字），可以使用 `url querystring` 传递。对于复杂的数据类型（如对象、数组），可以使用 `全局数据` 传递。

# 2. 微信小程序页面路由技巧

### 2.1 页面路由的基本原理

#### 2.1.1 页面栈和路由跳转

微信小程序的页面路由管理基于页面栈的概念。当用户访问小程序时，第一个加载的页面被压入页面栈中。随着用户在小程序中导航，后续访问的页面依次压入页面栈。当用户返回上一页时，当前页面从页面栈中弹出。

页面跳转可以通过 `wx.navigateTo`、`wx.redirectTo`、`wx.reLaunch` 和 `wx.switchTab` 等 API 实现。

- `wx.navigateTo`：将新页面压入页面栈，并保留当前页面在栈中。
- `wx.redirectTo`：将新页面压入页面栈，并替换当前页面。
- `wx.reLaunch`：将新页面压入页面栈，并关闭所有其他页面。
- `wx.switchTab`：将新页面压入页面栈，并切换到新的 tab。

#### 2.1.2 路由参数的传递

在进行页面跳转时，可以通过 `options` 参数传递数据。`options` 参数是一个对象，可以包含任意数据。在目标页面中，可以通过 `this.options` 获取传递的数据。

// 跳转到商品详情页，并传递商品 ID
wx.navigateTo({
  url: '/pages/product/detail',
  options: {
    productId: 123
  }
});

// 在商品详情页中获取商品 ID
const productId = this.options.productId;

### 2.2 页面路由的进阶应用

#### 2.2.1 动态路由和参数处理

动态路由允许根据用户输入或服务器返回的数据动态