微信小程序的路由系統和其他Web應用類似，主要通過頁面路徑和URL參數進行頁面導航和數據傳遞。下面詳細介紹微信小程序路由的基本使用方法和相關技巧。

1. 基本頁面導航

1.1 配置頁面路徑

在微信小程序的 app.json 文件中，需要配置小程序的頁面路徑。這里定義了小程序中包含的所有頁面路徑。

{"pages": ["pages/index/index","pages/detail/detail"]
}

1.2 使用導航 API 跳轉頁面

微信小程序提供了多種導航 API，可以在頁面之間進行跳轉。

wx.navigateTo	保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 可以返回到原頁面
wx.redirectTo	關閉當前頁面，跳轉到應用內的某個頁面
wx.switchTab	跳轉到指定的 tabBar 頁面，并關閉其他所有非 tabBar 頁面
wx.reLaunch	關閉所有頁面，打開到應用內的某個頁面

?

?

例子：使用 wx.navigateTo 跳轉頁面

wx.navigateTo({url: '/pages/detail/detail?id=123&name=John'
});

2. URL 參數傳遞

2.1 傳遞參數

在跳轉頁面時，可以在 URL 中附加參數，例如上面的例子中，我們在 URL 中附加了 id 和 name 參數。

2.2 獲取參數

在目標頁面的 onLoad 方法中，可以通過 options 參數獲取傳遞過來的參數：

Page({onLoad: function (options) {console.log(options.id);   // 輸出 123console.log(options.name); // 輸出 John}
});

3. 動態構建 URL 參數

有時需要傳遞動態生成的參數，可以通過字符串拼接或模板字符串來實現：

const id = 123;
const name = 'John';
wx.navigateTo({url: `/pages/detail/detail?id=${id}&name=${name}`
});

4. 復雜數據傳遞

如果需要傳遞復雜的數據（例如對象或數組），可以將數據轉換為 JSON 字符串傳遞，并在目標頁面進行解析。

4.1 傳遞 JSON 字符串

const data = {id: 123,name: 'John',items: [1, 2, 3]
};
wx.navigateTo({url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(data))}`
});

4.2 解析 JSON 字符串

在目標頁面中，通過 decodeURIComponent 和 JSON.parse 解析數據：

Page({onLoad: function (options) {const data = JSON.parse(decodeURIComponent(options.data));console.log(data.id);   // 輸出 123console.log(data.name); // 輸出 Johnconsole.log(data.items);// 輸出 [1, 2, 3]}
});

5. 使用全局數據或本地存儲

當傳遞的數據過大或復雜時，URL 參數可能不是最佳選擇。可以使用全局數據或本地存儲。

5.1 使用全局數據

在 app.js 中定義全局數據：

App({globalData: {userInfo: null}
});

在頁面中設置和獲取全局數據：

// 設置全局數據
const app = getApp();
app.globalData.userInfo = {id: 123,name: 'John'
};// 獲取全局數據
Page({onLoad: function () {const app = getApp();const userInfo = app.globalData.userInfo;console.log(userInfo.id);   // 輸出 123console.log(userInfo.name); // 輸出 John}
});

5.2 使用本地存儲

通過 wx.setStorageSync 和 wx.getStorageSync 來存儲和獲取數據：

// 設置本地存儲
wx.setStorageSync('userInfo', {id: 123,name: 'John'
});// 獲取本地存儲
Page({onLoad: function () {const userInfo = wx.getStorageSync('userInfo');console.log(userInfo.id);   // 輸出 123console.log(userInfo.name); // 輸出 John}
});