1. 引言

1.1 UniApp 與 Vue3 的結合優勢

UniApp 是一個使用 Vue.js 開發所有前端應用的框架，支持編譯到 iOS、Android、H5、以及各種小程序平臺。Vue3 提供了更高效的響應式系統和 Composition API，使開發體驗更加現代化和靈活。

1.2 頁面跳轉在應用開發中的重要性

頁面跳轉是用戶交互的核心功能之一，良好的跳轉邏輯可以提升用戶體驗并增強應用結構的清晰度。

2. UniApp 原生導航 API 跳轉方式

2.1 uni.navigateTo —— 保留當前頁面跳轉

uni.navigateTo({url: '/pages/targetPage/targetPage'
});

• 說明：保留當前頁面，跳轉到非 Tab 頁面。
• 適用場景：點擊按鈕進入詳情頁等。

2.2 uni.redirectTo —— 關閉當前頁面跳轉

uni.redirectTo({url: '/pages/targetPage/targetPage'
});

• 說明：關閉當前頁面，跳轉到目標頁面，不保留在頁面棧中。
• 適用場景：表單提交后跳轉。

2.3 uni.switchTab —— 跳轉至 Tab 頁面

uni.switchTab({url: '/pages/tabPage/tabPage'
});

• 說明：必須跳轉到 app.json 中注冊為 Tab 的頁面。
• 注意：不能攜帶參數。

2.4 uni.reLaunch —— 重新啟動目標頁面

uni.reLaunch({url: '/pages/homePage/homePage'
});

• 說明：關閉所有頁面，打開指定頁面。
• 適用場景：切換主界面或登出后重置頁面棧。

2.5 uni.navigateBack —— 返回上一級或多級頁面

uni.navigateBack({delta: 1 // 返回上一頁
});

• 說明：返回上一頁面或多級頁面。
• 示例：delta: 2 表示返回上兩級頁面。

3. Vue Router 在 Vue3 模式下的使用（適用于 vue-router-enabled 項目）

3.1 引入 Vue Router 及其配置方法

確保你在創建項目時啟用了 vue-router-enabled 模式：

npm install vue-router@next

配置路由：