uniapp怎么进行页面的跳转

在 UniApp 中,页面的跳转主要通过 navigator 组件或者 API 调用实现。以下是几种常见的页面跳转方法:

  1. 使用 <navigator> 组件

<navigator> 组件是页面链接的组件,类似于 HTML 中的 <a> 标签。你可以通过 url 属性指定要跳转到的页面路径。

复制代码

html复制代码

|---|-----------------------------------------------------------------|
| | <navigator url="/pages/detail/detail?id=1">跳转到详情页</navigator> |

注意:<navigator> 组件不能跳转到带有 tabBar 的页面。

  1. 使用 uni.navigateTo 方法

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

复制代码

javascript复制代码

|---|-------------------------------------|
| | uni.navigateTo({ |
| | url: '/pages/detail/detail?id=1' |
| | }); |

  1. 使用 uni.redirectTo 方法

uni.redirectTo 用于关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到带 tabBar 的页面。

复制代码

javascript复制代码

|---|-------------------------------------|
| | uni.redirectTo({ |
| | url: '/pages/detail/detail?id=1' |
| | }); |

  1. 使用 uni.reLaunch 方法

uni.reLaunch 用于关闭所有页面,打开到应用内的某个页面。

复制代码

javascript复制代码

|---|-------------------------------------|
| | uni.reLaunch({ |
| | url: '/pages/detail/detail?id=1' |
| | }); |

  1. 使用 uni.switchTab 方法

uni.switchTab 用于跳转到 tabBar 页面,并关闭其他非 tabBar 页面。

复制代码

javascript复制代码

|---|------------------------------|
| | uni.switchTab({ |
| | url: '/pages/index/index' |
| | }); |

  1. 使用 uni.navigateBack 方法

uni.navigateBack 用于关闭当前页面,返回上一页面或多级页面。可通过 delta 控制返回的层数。

复制代码

javascript复制代码

|---|-----------------------|
| | uni.navigateBack({ |
| | delta: 1 |
| | }); |

  1. 使用 uni.preloadPage 方法

uni.preloadPage 用于预加载页面,是一种优化手段,被预加载的页面在下次打开时,速度更快。

复制代码

javascript复制代码

|---|-------------------------------------|
| | uni.preloadPage({ |
| | url: '/pages/detail/detail?id=1' |
| | }); |

注意:以上 API 中的 url 参数是页面路径,路径后可以带参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔。如:/pages/detail/detail?id=1&name=uniapp

在页面中可以通过 this.$route.query 来获取这些参数。例如,在 detail 页面中,你可以通过 this.$route.query.id 来获取 id 参数的值。

相关推荐
风早爽太2 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun2 小时前
uniapp 实现项目多语言切换
uni-app
懒大王95274 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95274 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育7 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5559 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
百思可瑞教育16 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q19632884751 天前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育1 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e1 天前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app