路由与页面跳转-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字段用于配置窗口的样式。

{
  "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页面。
```
uni.navigateTo({
  url: '/pages/list/list'
});
```
uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。但不允许跳转到tabBar页面。
```
uni.redirectTo({
  url: '/pages/detail/detail?id=1'
});
```
uni.reLaunch(OBJECT)：关闭所有非tabBar页面，打开到应用内的某个页面。
```
uni.reLaunch({
  url: '/pages/index/index'
});
```
uni.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他非 tabBar 页面。
```
uni.switchTab({
  url: '/pages/tabBar/home'
});
```
uni.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过delta控制返回的页面数，如果delta大于现有页面数，则返回到首页。
```
uni.navigateBack({
  delta: 1
});
```

四、页面传参与接收

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

传递参数：在URL后附加查询字符串。

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=uniapp'
});

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

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的代码分割功能，可以很容易地实现这一点。
```
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快速入门与实战之旅提供有力支持。