JavaScript基础课程二十八、uni-app 页面与路由

本课是 uni-app 跨平台开发的核心进阶内容，聚焦页面管理与路由跳转，是开发完整多端应用的必备技能。课程围绕 pages.json 配置、路由 API、路由传参、页面生命周期四大核心，拆解多页面开发全流程，贴合实战场景。掌握本课内容，能规范搭建 uni-app 多页面项目，实现页面之间的流畅跳转与数据传递，搭配 TabBar 打造完整应用框架。uni-app 路由兼顾多端兼容性，学习门槛低，和 Vue 路由逻辑相近，上手极快。本课内容是后续接口对接、数据渲染、项目上线的基础，也是开发跨平台小程序、App 的核心环节，能大幅提升全端开发实战能力。

一、课程学习目的

熟练掌握 uni-app 页面创建、配置规范，理解全局样式与页面样式的优先级。
精通 uni-app 路由配置、页面跳转、参数传递与接收，实现多页面流畅交互。
掌握页面生命周期用法，适配页面加载、显示、隐藏、卸载等场景。
学会配置导航栏、TabBar，打造完整的多页面应用结构。
理解多端路由差异，规避常见路由报错，提升项目稳定性。
能够搭建完整的多页面 uni-app 项目，实现页面跳转、传参、返回闭环。

二、核心知识点讲解

1. uni-app 页面基础

uni-app 页面存放在 pages 文件夹下，每个页面由 vue 文件组成，遵循 Vue3 组合式 API 语法，专用组件代替传统 HTML 标签，适配多端渲染。

页面必须在 pages.json 中注册，排在数组第一项的页面为项目首页，是项目启动后默认加载的页面。

页面结构分为模板、脚本、样式三部分，模板部分只能用 uni-app 内置组件，禁止使用 div、span、p 等浏览器标签。

2. pages.json 核心配置

pages.json 是 uni-app 全局配置文件，负责路由、导航栏、TabBar 等全局设置，是多页面开发的核心文件。

主要配置项：

pages：数组格式，存放所有页面路由，包含页面路径和页面样式。
globalStyle：全局默认配置，统一设置导航栏、背景色等样式。
tabBar：配置底部 Tab 栏，实现首页、列表、个人中心等常用页面快捷切换。

3. uni-app 路由跳转 API

uni-app 提供专用路由 API，实现页面跳转、返回、关闭等操作，兼容小程序、App、H5 多端。

uni.navigateTo：保留当前页面，跳转到新页面，可返回上一页，支持传参。
uni.redirectTo：关闭当前页面，跳转到新页面，不可返回被关闭的页面。
uni.switchTab：跳转到 TabBar 页面，关闭其他所有非 TabBar 页面。
uni.navigateBack：返回上一级或多级页面，配合层级使用。

4. 路由传参与参数接收

路由传参用于页面间数据传递，比如列表页跳详情页，传递单词名称、id 等数据。

传参方式：在跳转路径后拼接参数，格式为 url?参数名=值&参数名=值。

参数接收：在目标页面的 onLoad 生命周期中，通过 options 对象获取传递的参数。

5. 页面生命周期

页面生命周期是页面从加载到卸载的全过程，常用生命周期：

onLoad：页面加载时触发，只执行一次，用于接收参数、请求数据。
onShow：页面显示时触发，每次显示都会执行。
onReady：页面初次渲染完成时触发。
onUnload：页面卸载时触发，用于清理定时器、取消订阅。

6. TabBar 配置规则

TabBar 最少配置2个、最多配置5个页面，需设置页面路径、按钮文字、图标，路径必须在 pages 数组中先注册。

跳转到 TabBar 页面必须使用 uni.switchTab，不能用 navigateTo，否则会跳转失败。

三、示例程序

示例1：pages.json 完整配置（路由+导航+TabBar）

json 复制代码

{
  "pages": [
    // 首页（TabBar页面）
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    // 单词列表页（TabBar页面）
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "单词列表"
      }
    },
    // 单词详情页（普通页面）
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "单词详情"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#42b983",
    "backgroundColor": "#f5f5f5"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#42b983",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/list/list",
        "text": "单词列表"
      }
    ]
  }
}

示例2：列表页跳转详情页（传参）

vue 复制代码

<template>
  <view class="list">
    <view class="item" v-for="item in wordList" :key="item.id" @click="goDetail(item)">
      <text>{{ item.en }} - {{ item.cn }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 单词列表数据
const wordList = ref([
  { id: 1, en: 'apple', cn: '苹果' },
  { id: 2, en: 'banana', cn': '香蕉' }
])

// 跳转详情页并传递参数
const goDetail = (item) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item.id}&en=${item.en}&cn=${item.cn}`
  })
}
</script>

示例3：详情页接收参数

vue 复制代码

<template>
  <view class="detail">
    <text>英文：{{ word.en }}</text>
    <text>中文：{{ word.cn }}</text>
    <button @click="goBack">返回列表</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 存储单词数据
const word = ref({})

// onLoad生命周期接收路由参数
onLoad((options) => {
  // options 存放所有传递的参数
  word.value = {
    id: options.id,
    en: options.en,
    cn: options.cn
  }
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

示例4：TabBar 页面跳转

javascript 复制代码

// 跳转到首页（TabBar页面）
const goIndex = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

四、掌握技巧与方法

新建页面后，第一时间在 pages.json 注册，避免页面找不到报错。
普通页面跳转用 navigateTo，TabBar 页面跳转必须用 switchTab。
路由传参时，特殊字符需编码，长文本不建议通过路由传递。
onLoad 生命周期只执行一次，适合初始化数据和接收路由参数。
页面路径必须写绝对路径，以 / 开头，保证多端跳转一致。
导航栏标题、样式在 pages.json 配置，优先级高于全局样式。
调试路由报错时，先检查路径拼写、参数格式、跳转 API 是否正确。
样式使用 rpx 响应式单位，适配手机、小程序等不同设备屏幕。

五、课后作业

基础作业

创建3个页面（首页、列表页、详情页），在 pages.json 完成路由注册。
配置全局导航栏样式，设置底部 TabBar，包含首页和列表页。
使用 navigateTo 实现列表页跳详情页，完成基础路由跳转。

进阶作业

实现路由传参，列表页传递单词数据，详情页接收并渲染。
使用 navigateBack 实现详情页返回列表页功能。
用 switchTab 实现 TabBar 页面快捷切换。

实战作业

开发 uni-app 多页面单词应用，包含首页、单词列表页、单词详情页，配置 TabBar 导航，实现页面跳转、路由传参、参数接收、返回上一页，适配 H5 和微信小程序，代码规范、注释完整、页面美观。

上一课：跨平台开发概述与 uni-app 入门实战作业代码

代码功能说明

本实战作业基于 HBuilderX 开发工具，使用 Vue3 语法搭建 uni-app 跨平台单词管理项目，包含首页和单词列表页两个页面。项目完成 pages.json 路由注册与全局导航栏配置，使用 uni-app 内置组件搭建页面结构，实现页面跳转、列表渲染、样式美化等功能。代码贴合跨平台开发规范，适配 H5 网页端与微信小程序端，一套代码可运行在多端。项目结构清晰，注释详尽，无浏览器专属 API，完美贴合课程知识点，帮助巩固 uni-app 项目创建、配置、基础开发的全流程，快速入门跨平台开发。

注意事项

必须使用 HBuilderX 编辑器创建和运行项目，不推荐其他编辑器。
页面必须在 pages.json 中注册，否则无法正常访问和跳转。
禁止使用 div、span 等 HTML 标签，改用 view、text 内置组件。
样式单位优先使用 rpx，实现多端屏幕自适应，避免使用固定 px。
运行到微信小程序时，需开启小程序服务端口，配置安全域名。
项目文件夹路径不要包含中文和特殊字符，防止编译报错。
运行项目前，先保存所有文件，避免代码修改不生效。
页面文件命名和路径保持小写，统一规范便于维护。

完整实战代码

项目结构

Plain 复制代码

uni-app-word/
├── pages/
│   ├── index/
│   │   └── index.vue
│   └── list/
│       └── list.vue
├── static/
├── App.vue
├── main.js
└── pages.json

pages.json（全局配置）

json 复制代码

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "单词库首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "单词列表"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#42b983",
    "backgroundColor": "#f5f5f5"
  }
}

App.vue（全局入口）

vue 复制代码

<script>
export default {
  onLaunch: function() {
    console.log('App启动')
  },
  onShow: function() {
    console.log('App显示')
  },
  onHide: function() {
    console.log('App隐藏')
  }
}
</script>

<style>
/* 全局样式 */
page {
  background-color: #f5f5f5;
}
</style>

main.js（Vue入口）

javascript 复制代码

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp({
    onLaunch: () => {},
    ...App
  })
  return {
    app
  }
}

pages/index/index.vue（首页）

vue 复制代码

<template>
  <view class="container">
    <text class="title">uni-app 单词管理器</text>
    <text class="desc">跨平台开发入门实战</text>
    <button class="btn" type="primary" @click="goToList">进入单词列表</button>
  </view>
</template>

<script setup>
// 跳转到列表页
const goToList = () => {
  uni.navigateTo({
    url: '/pages/list/list'
  })
}
</script>

<style scoped>
.container {
  padding: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 60rpx;
}
.btn {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>

pages/list/list.vue（单词列表页）

vue 复制代码

<template>
  <view class="list-box">
    <view class="item" v-for="item in wordList" :key="item.id">
      <text class="en">{{ item.en }}</text>
      <text class="cn">{{ item.cn }}</text>
    </view>
    <button class="back-btn" @click="goBack">返回首页</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 定义单词数据
const wordList = ref([
  { id: 1, en: 'apple', cn: '苹果' },
  { id: 2, en: 'banana', cn: '香蕉' },
  { id: 3, en: 'orange', cn: '橙子' },
  { id: 4, en: 'vue', cn: '前端框架' }
])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.list-box {
  padding: 30rpx;
}
.item {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
}
.en {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
.cn {
  font-size: 28rpx;
  color: #666;
}
.back-btn {
  margin-top: 40rpx;
}
</style>

运行方式

打开 HBuilderX，导入项目文件夹。
点击菜单栏【运行】，选择【运行到浏览器】或【运行到微信小程序】。
等待编译完成，即可预览多端效果。

作业验收标准

项目可正常运行，无编译报错，页面正常显示。
首页与列表页跳转流畅，返回功能正常。
列表数据正常渲染，样式美观，适配多端屏幕。
代码规范，注释清晰，符合 uni-app 开发标准。
H5 端和微信小程序端均可正常运行，无兼容性问题。

JavaScript基础课程二十八、uni-app 页面与路由

一、课程学习目的

二、核心知识点讲解

1. uni-app 页面基础

2. pages.json 核心配置

3. uni-app 路由跳转 API

4. 路由传参与参数接收

5. 页面生命周期

6. TabBar 配置规则

三、示例程序

示例1：pages.json 完整配置（路由+导航+TabBar）

示例2：列表页跳转详情页（传参）

示例3：详情页接收参数

示例4：TabBar 页面跳转

四、掌握技巧与方法

五、课后作业

基础作业

进阶作业

实战作业

上一课：跨平台开发概述与 uni-app 入门 实战作业代码

代码功能说明

注意事项

完整实战代码

项目结构

pages.json（全局配置）

App.vue（全局入口）

main.js（Vue入口）

pages/index/index.vue（首页）

pages/list/list.vue（单词列表页）

运行方式

作业验收标准

上一课：跨平台开发概述与 uni-app 入门实战作业代码