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