Uniapp页面跳转方法完整解析

前言

uniapp作为基于Vue.js的跨平台开发框架，其页面路由机制融合了小程序和Web的特性。本文将系统讲解6种核心跳转方式，深入解析参数传递技巧，并提供企业级实战方案。欢迎大家来学习本文哟~😄😄😄

一、基础跳转方法对比

1. uni.navigateTo—保留当前页跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

// 基础用法
uni.navigateTo({
  url: '/pages/detail/detail?id=123',
  success: () => console.log('跳转成功'),
  fail: (err) => console.error('跳转失败', err)
})

// 特性说明

• ✅ 保留当前页面（压入页面栈）
• ⚠️ 小程序端页面栈最多10层
• 🎯 适用于需要返回的次级页面（如商品详情）

2. uni.redirectTo—关闭当前页跳转

关闭当前页面，跳转到应用内的某个页面

uni.redirectTo({
  url: '/pages/login/login?from=home'
})

• 🔥 关闭当前页面（替换栈顶页面）
• 📌 无法跳转到TabBar页面
• 💡 典型场景：登录页替换首页

3. 重启应用跳转

关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
  url: '/pages/index/index'
})

• 💥 关闭所有页面打开新页面
• 🛠️ 可用于强制跳转首页
• ⚠️ 所有页面生命周期触发onUnload

4. TabBar切换

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。注意：只有这个方法能跳转到TabBar页面，其他的都不行！！！

uni.switchTab({
  url: '/pages/cart/cart'
})

• 🎯 专用于TabBar页面切换
• 🚫 不支持传递参数
• ⚡ 触发页面的onShow而非onLoad

5. 返回上级页面

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 返回1层
uni.navigateBack()

// 返回指定层数
uni.navigateBack({
  delta: 2 // 返回上上级
})

•  基于页面栈的后退机制
• 📦 可通过getCurrentPages()获取栈信息

6. 预加载加速（进阶）

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

// 提前加载页面
uni.preloadPage({
  url: '/pages/preload/preload'
})

// 正式跳转时直接使用navigateTo

• ⚡ 提升页面打开速度
• 🧠 适用于预测用户行为场景
• ⚠️ 需注意内存占用问题

二、参数传递全方案

1. URL传参（基础👊）

// 发送方
uni.navigateTo({
  url: '/pages/detail/detail?id=100&type=book'
})

// 接收方
onLoad(options) {
  console.log(options.id)    // 100
  console.log(options.type) // book
}

2. 全局变量传参

// 发送方
const globalData = getApp().globalData
globalData.tempData = { key: 'value' }

// 接收方
onShow() {
  const data = getApp().globalData.tempData
}

3. Vuex状态管理（推荐👍👍👍）

// store/modules/nav.js
export default {
  state: {
    navParams: null
  },
  mutations: {
    setNavParams(state, payload) {
      state.navParams = payload
    }
  }
}

// 发送方
this.$store.commit('nav/setNavParams', { id: 123 })

// 接收方
computed: {
  navParams() {
    return this.$store.state.nav.navParams
  }
}

4. 事件总线（复杂场景）

// utils/eventBus.js
import Vue from 'vue'
export default new Vue()

// 发送方
import eventBus from '@/utils/eventBus'
eventBus.$emit('page-params', { data: 'test' })

// 接收方
onLoad() {
  eventBus.$on('page-params', this.handleParams)
},
onUnload() {
  eventBus.$off('page-params', this.handleParams)
}

三、💪路由管理进阶实战💪

1. 路由拦截封装

// utils/router.js
const whiteList = ['/pages/login/login']

function routerPush(url) {
  const isLogin = checkLoginStatus()
  
  if (whiteList.includes(url)) {
    return uni.navigateTo({ url })
  }

  if (!isLogin) {
    uni.redirectTo({ url: '/pages/login/login' })
    return false
  }

  return true
}

// 使用示例
if (routerPush('/pages/order/order')) {
  uni.navigateTo({ url: '/pages/order/order' })
}

2. 动态路由处理器

// 处理带权限的路由跳转
const dynamicRoutes = {
  '/admin': { requireRole: 'admin' }
}

uni.addInterceptor('navigateTo', {
  invoke(args) {
    const routeConfig = dynamicRoutes[args.url]
    if (routeConfig && !checkPermission(routeConfig)) {
      uni.showToast({ title: '无权限访问' })
      return false
    }
    return args
  }
})

四、跨平台注意事项

1. 路径规范差异

2. 平台特性限制

1. H5端：
   • 支持window.historyAPI
   • 可配置hash路由模式
2. 小程序端：
   • 页面栈深度限制
   • 不支持浏览器原生跳转方式
3. App端：
   • 支持原生导航栏控制
   • 可定制页面转场动画

五、调试与性能优化

1. 页面栈查看

// 获取当前页面栈
const pages = getCurrentPages()
console.log('页面栈结构:', pages.map(p => p.route))

. 跳转性能优化

1. 预加载关键页面：使用preloadPage
2. 路由懒加载：拆分页面代码

// pages.json
{
  "path": "pages/lazy/lazy",
  "style": {
    "navigationBarTitleText": "懒加载页面",
    "lazyCodeLoading": "requiredComponents" 
  }
}

1. 避免频繁跳转：使用防抖策略

六、企业级最佳实践

1. 路由统一管理

// config/routes.js
export default {
  HOME: '/pages/index/index',
  DETAIL: {
    path: '/pages/detail/detail',
    auth: true
  }
}

// 使用示例
import routes from '@/config/routes'
uni.navigateTo({ url: routes.DETAIL.path })

2. 类型安全方案（TS）

// types/router.d.ts
declare namespace UniApp {
  interface NavigateToOptions {
    params?: Record<string, any>
  }
}

// 增强型跳转方法
function safeNavigateTo(options: UniApp.NavigateToOptions) {
  const url = `${options.url}?${qs.stringify(options.params)}`
  uni.navigateTo({ url })
}

总结与扩展
选择跳转方式的原则
层级关系：navigateTo构建页面栈
状态保持：redirectTo避免堆栈过深
特殊场景：switchTab处理底部导航
掌握这些跳转方法和优化技巧，将显著提升uniapp应用的导航流畅度和开发效率。建议根据项目规模选择合适的路由管理方案，并持续关注uniapp官方更新日志获取最新API特性

                        
原文链接：https://blog.csdn.net/zhw1984974676/article/details/145920805