uniapp 系统学习，从入门到实战（四）—— 页面与路由管理

全篇大概 2700 字(含代码)，建议阅读时间 20min

在跨平台开发中，高效的路由管理直接影响用户体验和开发效率。本文将深入探讨uniapp的页面创建、路由跳转、参数传递和生命周期管理，助您构建流畅的多端应用。

📚 目录

页面创建与配置
路由跳转方法大全
参数传递与接收技巧
页面生命周期深度解析
最佳实践与常见问题

1. 页面创建与配置

1.1 创建页面文件

在pages目录下新建.vue文件，建议使用小写字母命名：

detail.vue >> 详情页

index.vue >> 首页

复制代码

### 1.2 配置pages.json

```json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/index/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

1.3 页面初始化模板

html 复制代码

<template>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始化数据
    }
  }
}
</script>

<style>
.content {
  padding: 20rpx;
}
</style>

2. 路由跳转方法大全

2.1 核心跳转API对比

方法说明特点

uni.navigateTo 保留当前页，跳转到新页面产生页面栈，可返回

uni.redirectTo 关闭当前页，跳转到新页面不产生新页面栈

uni.reLaunch 关闭所有页面，打开新页面清空页面栈

uni.switchTab 切换Tab页面专用于Tab栏页面切换

uni.navigateBack 返回上一页可指定返回层数

2.2 使用示例

javascript 复制代码

// 保留跳转（可返回）
uni.navigateTo({
  url: '/pages/index/detail'
});

// 替换跳转（不可返回）
uni.redirectTo({
  url: '/pages/index/detail'
});

// 关闭所有页面跳转
uni.reLaunch({
  url: '/pages/login/index'
});

// Tab栏切换
uni.switchTab({
  url: '/pages/tabbar/home'
});

3. 参数传递与接收技巧

3.1 参数传递方式

javascript 复制代码

// 方式1：URL拼接
uni.navigateTo({
  url: '/pages/detail?id=123&name=uniap'
});

// 方式2：对象参数（自动编码）
uni.navigateTo({
  url: '/pages/detail',
  success(res) {
    res.eventChannel.emit('sendData', {
      id: 456,
      title: '动态参数'
    });
  }
});

3.2 参数接收处理

javascript 复制代码

export default {
  onLoad(options) {
    // URL参数获取
    console.log('接收参数:', options.id); 
    
    // EventChannel方式
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendData', data => {
      console.log('事件参数:', data);
    });
  }
}

3.3 注意事项

URL参数长度限制：不同平台不同（建议<1KB）

复杂对象需JSON序列化：

javascript 复制代码

const params = encodeURIComponent(
	JSON.stringify({a:1, b:2})
);
uni.navigateTo({
	url: `/pages/detail?params=${params}`
});

4. 页面生命周期深度解析

4.1 生命周期流程图

4.2 核心生命周期方法

阶段	触发时机	开发者操作建议
onLoad	页面首次加载时（接收参数）	解析路由参数，初始化页面数据
onShow	页面进入前台时（包括返回）	刷新动态数据（如用户信息更新）
onReady	页面初次渲染完成	操作DOM/调用原生组件API
onHide	页面进入后台时（跳转/切后台）	保存草稿、暂停动画/音视频
onUnload	页面销毁时（无法返回）	清除定时器、取消未完成的网络请求

4.3 示例代码

javascript 复制代码

export default {
  onLoad(options) {
    console.log('页面加载', options);
    this.loadData();
  },
  onShow() {
    console.log('页面显示');
    this.updateBadge();
  },
  onReady() {
    console.log('DOM就绪');
    this.initMap();
  },
  onHide() {
    console.log('页面隐藏');
    this.saveDraft();
  },
  onUnload() {
    console.log('页面卸载');
    clearInterval(this.timer);
  }
}

5. 最佳实践与常见问题

5.1 路由管理Tips

页面栈限制：小程序平台最多10层

Tab页需在pages.json中预先声明

使用uni.preloadPage预加载提升体验

5.2 常见问题排查

白屏问题：检查页面路径是否正确

参数丢失：确保正确使用encodeURIComponent

生命周期不触发：避免在子组件中使用页面生命周期

5.3 性能优化建议

减少onShow中的复杂逻辑

使用页面预加载技术

合理使用页面卸载时的资源释放
💡 小贴士：使用uni-simple-router插件可轻松实现更复杂的路由管理需求，支持路由守卫、嵌套路由等高级功能。