第2课：页面与路由 - UniApp页面系统深度解析

📚 课程概述

页面与路由是UniApp应用开发的核心基础。本课程将深入讲解UniApp的页面系统、路由配置、页面跳转以及相关的生命周期管理，帮助你构建复杂的多页面应用。

学习目标：

掌握UniApp页面结构和工作原理
理解pages.json配置文件的详细用法
熟练使用各种页面跳转API
理解页面生命周期和传参机制
掌握TabBar和导航栏的配置方法

🏗️ 页面结构深度解析

页面文件组织

UniApp采用约定式路由，页面文件必须放在pages目录下，每个页面对应一个文件夹：

            pages/
            ├── index/           # 首页
            │   ├── index.vue    # 页面组件
            │   └── ...
            ├── user/            # 用户页面
            │   ├── user.vue
            │   └── ...
            └── detail/          # 详情页面
                ├── detail.vue
                └── ...
        

页面组件基本结构

每个页面都是一个Vue组件，包含template、script、style三个部分：

🗺️ 路由配置详解

pages.json配置文件

pages.json是UniApp的路由配置文件，定义了应用的所有页面和全局样式：

            {
                "pages": [
                    {
                        "path": "pages/index/index",
                        "style": {
                            "navigationBarTitleText": "首页",
                            "navigationBarBackgroundColor": "#2B9939",
                            "navigationBarTextStyle": "white",
                            "enablePullDownRefresh": true
                        }
                    },
                    {
                        "path": "pages/user/user",
                        "style": {
                            "navigationBarTitleText": "用户中心",
                            "navigationStyle": "custom"  // 自定义导航栏
                        }
                    }
                ],
                "globalStyle": {
                    "navigationBarTextStyle": "black",
                    "navigationBarTitleText": "uni-app",
                    "navigationBarBackgroundColor": "#F8F8F8",
                    "backgroundColor": "#F8F8F8",
                    "app-plus": {
                        "background": "#efeff4"
                    }
                },
                "tabBar": {
                    "color": "#7A7E83",
                    "selectedColor": "#2B9939",
                    "borderStyle": "black",
                    "backgroundColor": "#ffffff",
                    "list": [
                        {
                            "pagePath": "pages/index/index",
                            "iconPath": "static/tabbar/home.png",
                            "selectedIconPath": "static/tabbar/home-active.png",
                            "text": "首页"
                        },
                        {
                            "pagePath": "pages/user/user",
                            "iconPath": "static/tabbar/user.png",
                            "selectedIconPath": "static/tabbar/user-active.png",
                            "text": "我的"
                        }
                    ]
                }
            }
        

路由配置关键属性

属性	说明	示例
path	页面路径，相对于pages目录	"pages/index/index"
navigationBarTitleText	导航栏标题文字	"首页"
navigationBarBackgroundColor	导航栏背景颜色	"#2B9939"
enablePullDownRefresh	是否开启下拉刷新	true/false
navigationStyle	导航栏样式	"default" / "custom"

🔗 页面跳转与传参

页面跳转API

UniApp提供了多种页面跳转方式，满足不同场景需求：

            // 1. 保留当前页面，跳转到应用内的某个页面
            uni.navigateTo({
                url: '/pages/detail/detail?id=1&name=test'
            })
            
            // 2. 关闭当前页面，跳转到应用内的某个页面
            uni.redirectTo({
                url: '/pages/login/login'
            })
            
            // 3. 跳转到tabBar页面，并关闭其他所有非tabBar页面
            uni.switchTab({
                url: '/pages/index/index'
            })
            
            // 4. 关闭当前页面，返回上一页面或多级页面
            uni.navigateBack({
                delta: 1  // 返回的页面数，如果delta大于现有页面数，则返回到首页
            })
            
            // 5. 预加载页面（仅H5端支持）
            uni.preloadPage({
                url: '/pages/detail/detail'
            })
        

参数传递与接收

页面间可以通过URL参数传递数据：

            // 发送页面
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + this.id + '&title=' + encodeURIComponent(this.title)
            })
            
            // 接收页面（在detail.vue中）
            export default {
                onLoad(options) {
                    console.log('接收到的参数:', options)
                    // options包含：{id: "1", title: "测试标题"}
                    this.id = options.id
                    this.title = decodeURIComponent(options.title)
                }
            }
        

⏱️ 页面生命周期

完整的页面生命周期

UniApp页面生命周期与Vue组件生命周期结合，提供了丰富的钩子函数：

            export default {
                // 页面加载时触发，可以获取传递的参数
                onLoad(options) {
                    console.log('页面加载', options)
                },
                
                // 页面显示时触发
                onShow() {
                    console.log('页面显示')
                },
                
                // 页面初次渲染完成时触发
                onReady() {
                    console.log('页面初次渲染完成')
                },
                
                // 页面隐藏时触发
                onHide() {
                    console.log('页面隐藏')
                },
                
                // 页面卸载时触发
                onUnload() {
                    console.log('页面卸载')
                },
                
                // 用户下拉刷新时触发
                onPullDownRefresh() {
                    console.log('下拉刷新')
                    // 停止下拉刷新动画
                    uni.stopPullDownRefresh()
                },
                
                // 页面上拉触底时触发
                onReachBottom() {
                    console.log('上拉触底')
                },
                
                // 用户点击右上角分享时触发
                onShareAppMessage() {
                    return {
                        title: '分享标题',
                        path: '/pages/index/index'
                    }
                }
            }
        

生命周期执行顺序

页面A → 页面B的生命周期流程：

页面A.onHide() → 页面B.onLoad() → 页面B.onShow() → 页面B.onReady()

📱 TabBar配置与使用

TabBar配置详解

TabBar是底部导航栏，用于快速切换主要功能页面：

            "tabBar": {
                "color": "#7A7E83",           // 文字默认颜色
                "selectedColor": "#2B9939",   // 文字选中颜色
                "backgroundColor": "#ffffff", // 背景颜色
                "borderStyle": "black",       // 上边框颜色
                "list": [
                    {
                        "pagePath": "pages/index/index",
                        "iconPath": "static/tabbar/home.png",
                        "selectedIconPath": "static/tabbar/home-active.png",
                        "text": "首页"
                    },
                    {
                        "pagePath": "pages/category/category",
                        "iconPath": "static/tabbar/category.png",
                        "selectedIconPath": "static/tabbar/category-active.png",
                        "text": "分类"
                    },
                    {
                        "pagePath": "pages/cart/cart",
                        "iconPath": "static/tabbar/cart.png",
                        "selectedIconPath": "static/tabbar/cart-active.png",
                        "text": "购物车"
                    },
                    {
                        "pagePath": "pages/user/user",
                        "iconPath": "static/tabbar/user.png",
                        "selectedIconPath": "static/tabbar/user-active.png",
                        "text": "我的"
                    }
                ]
            }
        

TabBar使用注意事项

TabBar页面不能使用navigateTo跳转，必须使用switchTab
TabBar页面数量建议在2-5个之间
图标建议使用png格式，尺寸建议44x44像素
TabBar页面不支持自定义导航栏

💡 最佳实践与性能优化

路由优化建议：

合理使用页面预加载提升用户体验
避免过深的页面层级（建议不超过5层）
使用条件编译优化不同平台的页面表现
及时清理不需要的页面缓存

常见问题：

页面路径错误：检查pages.json配置和文件路径
参数传递乱码：使用encodeURIComponent编码中文参数
TabBar不显示：检查配置格式和图标路径
页面跳转失败：确认目标页面是否存在且配置正确

🔮 下一步学习方向

掌握了页面与路由系统后，下一课我们将深入学习UniApp的组件系统，了解如何创建和使用自定义组件，以及组件间的通信机制。

← 上一课：基础入门下一课：组件基础 →