UniApp 开发全攻略：路由与页面跳转

2023-05-06 22:37:33

UniApp 中的路由管理：构建灵活而强大的应用程序

1. 理解 UniApp 中的路由

在 UniApp 的生态系统中，路由是一种管理应用程序页面跳转和状态的机制。它由两个关键组件组成：路由表和路由器。路由表定义了应用程序中所有路由的路径、组件和跳转方式，而路由器负责根据当前路由信息渲染对应的组件。

2. 路由的基本用法

在 UniApp 中，可以使用 uni.navigateTo()、uni.redirectTo() 和 uni.navigateBack() 等方法来进行页面跳转。这些方法的参数主要包括要跳转的页面路径 (url) 和可设置动画效果、是否关闭当前页面等可选参数 (options)。

// 跳转到新页面，关闭当前页面
uni.redirectTo({
  url: '/pages/new-page',
})

// 跳转到新页面，不关闭当前页面
uni.navigateTo({
  url: '/pages/new-page',
})

// 返回上一页
uni.navigateBack()

3. 路由的钩子函数

UniApp 提供了一系列路由钩子函数，可以在页面加载、卸载、显示和隐藏时执行特定的操作。这些钩子函数包括：

onLoad()：页面加载时触发。
onReady()：页面加载完成后触发。
onShow()：页面显示时触发。
onHide()：页面隐藏时触发。
onUnload()：页面卸载时触发。

通过使用这些钩子函数，可以实现诸如页面初始化、数据获取、事件处理等功能。

4. 复杂的路由用法

动态路由：

动态路由允许根据参数的不同跳转到不同的页面。例如，我们可以根据商品的 ID 跳转到对应的商品详情页面。

uni.navigateTo({
  url: '/pages/product/detail?id=' + productId,
})

路由别名：

路由别名允许为路由指定一个别名，使用别名进行页面跳转。这可以简化路由路径，提高代码可读性。

// 定义路由别名
uni.addRoute({
  path: '/pages/product/detail',
  alias: 'product-detail',
})

// 使用路由别名跳转
uni.navigateTo({
  url: 'product-detail?id=' + productId,
})

路由守卫：

路由守卫允许在页面跳转之前执行特定的操作。例如，我们可以使用路由守卫来检查用户是否已登录，如果未登录则跳转到登录页面。

// 添加路由守卫
uni.addInterceptor('navigateTo', (options, next) => {
  if (options.url.startsWith('/pages/private/')) {
    if (!uni.getStorageSync('token')) {
      uni.navigateTo({
        url: '/pages/login',
      })
    } else {
      next()
    }
  } else {
    next()
  }
})