路由与页面跳转-uniapp快速入门与实战

当前位置:　首页>> 技术小册>> uniapp快速入门与实战

### 路由与页面跳转

在开发移动应用或跨平台Web应用时，路由与页面跳转是构建用户导航体验的核心部分。对于使用uni-app框架进行开发的开发者而言，掌握这一技能尤为关键。uni-app作为一个使用Vue.js开发所有前端应用的框架，它提供了丰富的API和组件来简化跨平台开发，其中路由管理便是其强大功能之一。本章将深入介绍uni-app中的路由与页面跳转机制，包括基础概念、配置方式、编程式导航以及高级特性等。

#### 一、路由基础概念

在Web开发中，路由是指根据URL的变化来加载不同的页面或组件，实现页面的跳转。而在uni-app中，由于它支持编译到多个平台（如H5、小程序、App等），路由的概念略有不同，但基本原理相通。uni-app中的路由主要指的是页面之间的跳转和参数的传递。

- **页面**：在uni-app中，每个`.vue`文件都被视为一个页面，它们通过`<template>`、`<script>`、`<style>`三部分来定义结构、逻辑和样式。
- **路由表**：虽然uni-app不像Vue Router那样显式地维护一个路由表，但它通过`pages.json`配置文件来管理应用的所有页面路径和窗口表现。
- **页面跳转**：用户通过点击按钮、链接或执行某些操作触发页面跳转，uni-app提供了多种方式进行页面间的导航。

#### 二、配置pages.json管理页面

`pages.json`是uni-app中用于配置所有页面的文件，它决定了哪些页面会被编译到应用中，以及这些页面的初始窗口表现（如标题、导航栏样式等）。在`pages`数组中，每个对象代表一个页面，其`path`字段指定了页面的路径，`style`字段用于配置窗口的样式。

```json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表页"
      }
    },
    // 更多页面配置...
  ],
  // 其他全局配置...
}
```

#### 三、编程式导航

uni-app提供了`uni.navigateTo`、`uni.redirectTo`、`uni.reLaunch`、`uni.switchTab`、`uni.navigateBack`等多种API来实现编程式页面跳转，这些API使得开发者可以根据应用逻辑灵活地控制页面跳转。

- **uni.navigateTo(OBJECT)**：保留当前页面，跳转到应用内的某个页面。但不能跳转到tabBar页面。
  
  ```javascript
  uni.navigateTo({
    url: '/pages/list/list'
  });
  ```

- **uni.redirectTo(OBJECT)**：关闭当前页面，跳转到应用内的某个页面。但不允许跳转到tabBar页面。
  
  ```javascript
  uni.redirectTo({
    url: '/pages/detail/detail?id=1'
  });
  ```

- **uni.reLaunch(OBJECT)**：关闭所有非tabBar页面，打开到应用内的某个页面。
  
  ```javascript
  uni.reLaunch({
    url: '/pages/index/index'
  });
  ```

- **uni.switchTab(OBJECT)**：跳转到 tabBar 页面，并关闭其他非 tabBar 页面。
  
  ```javascript
  uni.switchTab({
    url: '/pages/tabBar/home'
  });
  ```

- **uni.navigateBack(OBJECT)**：关闭当前页面，返回上一页面或多级页面。可通过`delta`控制返回的页面数，如果`delta`大于现有页面数，则返回到首页。
  
  ```javascript
  uni.navigateBack({
    delta: 1
  });
  ```

#### 四、页面传参与接收

在页面跳转时，经常需要传递参数给目标页面。uni-app支持在URL中通过查询字符串（query）或动态路由（对于H5和小程序原生页面）的方式来传递参数。

- **传递参数**：在URL后附加查询字符串。
  
  ```javascript
  uni.navigateTo({
    url: '/pages/detail/detail?id=123&name=uniapp'
  });
  ```

- **接收参数**：在目标页面的`onLoad`或`onShow`生命周期函数中，通过`options`参数获取传递的参数。
  
  ```javascript
  export default {
    onLoad(options) {
      console.log(options.id); // 输出: 123
      console.log(options.name); // 输出: uniapp
    }
  }
  ```

对于H5和小程序原生页面，还可以使用动态路由的方式传递参数，但这通常涉及到更复杂的配置和路由管理，不是uni-app框架直接提供的功能，需要开发者根据具体平台进行适配。

#### 五、高级特性

- **全局前置守卫**：虽然uni-app没有直接提供Vue Router中的全局守卫功能，但可以通过监听页面路由变化的事件（如`onShow`、`onUnload`等）或自定义全局方法来模拟这一行为，实现页面跳转前的权限校验、数据加载等需求。
  
- **路由懒加载**：为了提高应用性能，尤其是在处理大量页面时，可以通过路由懒加载（也称为代码分割）来按需加载页面。uni-app支持Vue的异步组件和webpack的代码分割功能，可以很容易地实现这一点。
  
  ```javascript
  const Home = () => import('../pages/home/home.vue');
  
  // 在pages.json中配置
  {
    "path": "pages/home/home",
    "component": Home
  }
  ```
  
  注意：由于`pages.json`不支持直接引用JS函数，上述代码分割的示例主要用于Vue组件内部动态导入，而在`pages.json`中配置页面时仍需指定`.vue`文件路径。对于真正的路由懒加载，可能需要结合构建工具（如webpack）的配置来实现。

- **页面栈管理**：虽然uni-app没有直接提供API来查看或操作页面栈，但可以通过监听页面生命周期事件和全局变量来间接管理页面栈，实现更复杂的导航逻辑。

#### 六、总结

路由与页面跳转是uni-app开发中不可或缺的一部分，它直接关系到应用的用户体验和页面间数据的传递。通过合理利用`pages.json`配置页面、掌握编程式导航API、理解页面传参与接收机制，以及探索高级特性如全局前置守卫、路由懒加载等，开发者可以构建出更加灵活、高效、用户友好的应用。希望本章内容能为你的uni-app快速入门与实战之旅提供有力支持。

该分类下的相关小册推荐：

web前端面试完全指南

vue高级应用开发与构建

WebGL开发指南

Web响应式布局入门到实战