UniApp 頁面結構與頁面跳轉機制全解：pages.json 到 navigate 的那些事兒
作者：Ss肥魚
在 UniApp 項目中，所有頁面的配置入口都集中在 pages.json 文件中，這是項目的“導航地圖”。
需要看項目創建的，請查閱uniapp項目創建
目前分享的FastAPI的知識點，是我平時做項目使用到的，差不多能開始前端的東西了。我也十分感謝各位肥魚粉給出建議和提出需求，我都有查看，便于后期整理分享。
頁面配置的核心：pages.json
在 UniApp 項目中，所有頁面的配置入口都集中在 pages.json 文件中，這是項目的“導航地圖”。
基本結構如下：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁"
}
},
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "關于我們"
}
}
],
"window": {
"navigationBarTitleText": "Demo",
"navigationBarBackgroundColor": "#F8F8F8"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png"
},
{
"pagePath": "pages/about/about",
"text": "關于"
}
]
}
}要點解析：
- pages: 頁面列表，路徑必須對應 pages/xxx/xxx.vue
- style: 單個頁面的樣式設置
- tabBar: 定義底部導航欄，最多 5 個頁面
- window: 設置全局頁面樣式
頁面跳轉方式詳解
UniApp 提供多個頁面跳轉 API，根據頁面類型不同選擇對應方法：
方法名 | 是否保留當前頁 | 是否支持 Tab 頁面 | 使用場景 |
| ? 是 | ? 否 | 普通頁面跳轉 |
| ? 否 | ? 否 | 替換當前頁面 |
| ? 是 | ? 是 | 切換底部 tab 頁 |
| ? 否 | ? 是 | 清空棧并跳轉 |
| ? 是 | ? 是 | 返回上一頁或多級頁面 |
示例：
uni.navigateTo({
url: '/pages/about/about'
})
uni.switchTab({
url: '/pages/index/index'
})
uni.redirectTo({
url: '/pages/login/login'
})注意：navigateTo 不能跳轉到 tabBar 頁面，否則會報錯。
頁面生命周期函數
每個頁面都有生命周期鉤子函數，你可以在這些鉤子中執行邏輯代碼：
export default {
onLoad(options) {
console.log('頁面加載', options)
},
onShow() {
console.log('頁面顯示')
},
onReady() {
console.log('初次渲染完成')
},
onHide() {
console.log('頁面隱藏')
},
onUnload() {
console.log('頁面卸載')
}
}封裝統一跳轉方法（推薦實戰）
項目大了之后，各種頁面跳轉可能會混亂，為了統一入口和管理 tab 頁面跳轉邏輯，推薦封裝跳轉工具方法。
往下看完先別罵！??Stop，這個例子是方便直白地理解為什么要工具類以及怎么寫，怎么最簡單的使用。大家理解后肯定能找到或者寫出符合自己需求的工具類，那我用的已經成套沒法單獨講，長篇幅會影響大家對細節的理解，望大佬見諒。
utils/navigator.js：
// tabBar 頁面路徑
const tabPages = [
'/pages/index/index',
'/pages/about/about'
]
/**
* 通用跳轉函數
* @param {String} url 頁面路徑
* @param {String} type 跳轉類型：navigateTo / redirectTo / reLaunch / switchTab
*/
export function navTo(url, type = 'navigateTo') {
if (tabPages.includes(url)) {
uni.switchTab({ url })
} else {
if (type === 'navigateTo') {
uni.navigateTo({ url })
} else if (type === 'redirectTo') {
uni.redirectTo({ url })
} else if (type === 'reLaunch') {
uni.reLaunch({ url })
} else {
console.warn(`不支持的跳轉類型：${type}`)
}
}
}使用示例：
import { navTo } from '@/utils/navigator.js'
navTo('/pages/about/about') // 非 tab 頁面跳轉
navTo('/pages/index/index') // 會被識別為 switchTab 跳轉好處：
- 避免跳錯跳法
- 自動識別 tab 頁面
- 增強代碼一致性和可維護性
小結
- pages.json 是頁面注冊與導航的關鍵配置，必須合理管理。
- 頁面跳轉方式各有側重，應結合頁面類型使用。
- 生命周期鉤子函數是頁面控制的核心，務必熟練掌握。
- 推薦封裝跳轉方法，統一處理 tab 頁與普通頁跳轉邏輯，提升項目維護性。
責任編輯：趙寧寧
來源：
Ssoul肥魚
