uniapp跳转方式

UniApp 是一个基于 Vue.js 的跨平台开发框架,可以同时构建 iOS、Android、H5 和小程序等多个平台的应用。在 UniApp 中,我们可以使用以下几种方式进行页面之间的跳转:

使用 uni.navigateTo 方法:该方法可以在当前页面打开新的页面,并且会将新页面加入页面栈中,可以通过返回按钮返回上一个页面。

javascript 复制代码
// 在 A 页面中跳转到 B 页面
uni.navigateTo({
  url: '/pages/B'
});

// 在 A 页面中跳转到 B 页面 uni.navigateTo({ url: '/pages/B' });

使用 uni.redirectTo 方法:该方法可以关闭当前页面并打开新的页面,不会保留当前页面在页面栈中的位置,无法通过返回按钮返回到当前页面。

javascript 复制代码
// 关闭当前页面并跳转到 B 页面
uni.redirectTo({
  url: '/pages/B'
});

// 关闭当前页面并跳转到 B 页面 uni.redirectTo({ url: '/pages/B' });

使用 uni.reLaunch 方法:该方法可以关闭所有页面,并打开新的页面。适用于跳转到应用的首页或者欢迎页等需要重新加载的场景。

javascript 复制代码
// 关闭所有页面并跳转到 B 页面
uni.reLaunch({
  url: '/pages/B'
});

// 关闭所有页面并跳转到 B 页面 uni.reLaunch({ url: '/pages/B' });

使用 uni.switchTab 方法:该方法用于跳转到 tabBar 页面,只能打开 tabBar 配置中指定的页面。

javascript 复制代码
// 切换到 tabBar 的 B 页面
uni.switchTab({
  url: '/pages/B'
});

// 切换到 tabBar 的 B 页面 uni.switchTab({ url: '/pages/B' });

此外,还可以通过在模板中使用 navigator 标签来实现页面跳转,具体使用方法可以参考 UniApp 官方文档中的相关内容。

相关推荐
喵喵虫7 小时前
uniapp修改封装组件失败 styleIsolation
uni-app
游戏开发爱好者818 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063220 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063220 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息1 天前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”1 天前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
局外人LZ2 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
2501_915918412 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
前端呆头鹅2 天前
Websocket使用方案详解(uniapp版)
websocket·网络协议·uni-app
浮桥2 天前
uniapp+h5 公众号实现分享海报绘制
uni-app·notepad++