uniapp页面跳转的几种方式

news2025/7/7 12:30:09

uniapp页面跳转的几种方式


一、uni.navigateTo

  1. 定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
  2. 使用:
    在这里插入图片描述
// 1.不传参
uni.navigateTo({
    url:'./home/index'
});
// 2.传参字符串
uni.navigateTo({
    url:`./home/index?title=${title}`
});
// 3.传参对象
// 传入
let data = {
    title:'hello',
    id: 1
}
uni.navigateTo({
	url:`./home/index?data=`+ encodeURIComponent(JSON.stringify(data))
})

// 接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

二、uni.redirectTo

  1. 定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数)
  2. 使用:
    在这里插入图片描述
uni.redirectTo({
  url:'./home/index'
});

三、uni.reLaunch

  1. 定义:关闭所有页面,打开到应用内的某个页面(可带参数)
  2. 使用:
    在这里插入图片描述
uni.reLaunch({
    url:'./home/index'
});

四、uni.switchTab

  1. 定义:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  2. 使用:
    在这里插入图片描述
uni.switchTab({
   url:'./home/index'
});

五、uni.navigateBack

  1. 定义:关闭当前页面,返回上一页面或多级页面
  2. 使用:
    在这里插入图片描述
uni.navigateBack({
    url:'./home/index'
});
uni.navigateBack({
	delta: 2
});

总结

navigateTo, redirectTo 只能打开非 Tab 页面,可传参。
switchTab 只能打开 Tab 页面,不可传参。
reLaunch 可以打开任意页面,可传参。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406012.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue后台管理系统模板

推荐一些 Vue 常用后台管理系统模板 前言 Vue.js 是一个目前比较流行的前端框架,已经到了前端人人都会的地步,今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-V…

项目中报错 Uncaught (in promise)

项目中报错 Uncaught (in promise) 一、问题:当你调用 Promise.reject() 回调的时候,Chrome 控制台中出现一条警告消息“Uncaught (in promise)”。 例如你简单封装axios的响应拦截器的时候: // 响应拦截 service.interceptors.response.u…

VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂

首先个人觉得 tinymce这个富文本编辑器是最好用 最编辑的 ,对懒人非常友好 的一款编辑器,刚 有哟个项目 ,就遇到了 使用富文本编辑的坑 ,因为赶项目进度自己在网上随便找了一个富文本编器,就是 quill 这个 坑 实在太多…

【个人网站】零基础个人网站搭建完整教程(附免费源码)

零基础个人网站搭建完整教程(一) 内容包括:前端搭建后端搭建源码网盘链接搭建服务器网站上线(完整教程) 从0到1搭建网站零基础个人网站搭建完整教程(一)前言一、前端搭建一、副页设计1.显示文字…

最新Eclipse安装教程(2022-09)

前言 现在是在校大学生,未来想从事大数据相关的工作,目前在b站学习大数据,写这些的目的是为了整理、巩固学过的知识,以后自己工作了也可以回头看看,如果还能够帮助到大家,就再好不过了! 一、Ec…

Python Flask框架-开发简单博客-项目布局、应用设置

作者:Eason_LYC 悲观者预言失败,十言九中。 乐观者创造奇迹,一次即可。 一个人的价值,只在于他所拥有的。所以可以不学无术,但不能一无所有! 技术领域:WEB安全、网络攻防 关注WEB安全、网络攻防…

Vue3父子组件通讯一目了然

文章目录🌟 写在前面🌟 父 👉 子🌟 子 👉 父🌟 写在最后🌟 写在前面 专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文…

前端直接生成GIF动态图实践

前言去年在博客中发了两篇关于GIF动态生成的博客,GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探,在这两篇博客中都是采用JAVA语言在后台进行转换。使用JAVA的同学经过自己的改造和开发也可以应用在项目上。前段时间有朋友私下问&…

chatgpt这么火?前端如何实现类似chatgpt的对话页面

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言📝…

【毕业季|进击的技术er】作为一名职场人,精心总结的嵌入式学习路线图

活动地址:毕业季进击的技术er 文章目录0、作者介绍1、前言2、嵌入式基础必备知识2.1、学习内容2.2、学习建议2.3、学习资料3、嵌入式入门篇——51单片机3.1、学习内容3.2、学习建议3.3、学习资料4、STM32进阶篇4.1、学习内容4.2、学习建议4.3、学习资料5、小而美的R…

目标跟踪算法综述

前言: 目标跟踪是计算机视觉领域研究的一个热点问题,其利用视频或图像序列的上下文信息,对目标的外观和运动信息进行建模,从而对目标运动状态进行预测并标定目标的位置。目标跟踪算法从构建模型的角度可以分为生成式(generative)模型和判别…

Vue--》搭配Bootstrap实现Vue的列表增删功能

在日常开发中,我们可以用 “拿来主义” 借助Bootstarp现成的一些样式,快速生成我们想要的页面布局,避免书写大量的HTML和CSS代码,省下了许多不必要的时间。 当我们想要生成表单表格时我们可以查看Bootstrap的官方文档,…

vue2响应式原理

首先要知道vue2 是2013年 基于 ES5开发出来的 我们常说的重渲染就是重新运行render函数 vue2响应式原理简单来说就是vue官网上的这图片 通过 Object.defineProperty 遍历对象的每一个属性,把每一个属性变成一个 getter 和 setter 函数,读取属性的时候…

前端学习之CSS

目录 引言 1. 什么是CSS? 2. 在HTML中使用CSS的三方式(基于CSS2. 0) 2.1 内联定义 2.2 样式块 2.3 引入文件 引言 大家不要觉得CSS也是一种语言,需要花费很多的时间去学习,不要恐惧它,其实CSS只是一个很小的知识点,我们在…

【web渗透】SSRF漏洞超详细讲解

💕💕💕 博主昵称:摆烂阳💕💕💕 🥰博主主页跳转链接 👩‍💻博主研究方向:web渗透测试 、python编程 📃 博主寄语:希望本篇文…

Vue3的优点,为什么要使用Vue3

1.为什么要使用Vue3: 这里主要通过介绍Vue3的优点以及与Vue2的对比来解答这个问题。 Vue3的六大亮点 1.性能比Vue2快1.2~2倍; 性能的提升主要是通过响应式系统的提升(vue3使用proxy对象重写响应式)以及编译优化(优…

Web项目【用户管理系统】完整版

目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执,方能有所成! &…

vite3+vue3 项目打包优化实战之-视图分析(rollup-plugin-visualizer)、CDN引入、依赖分包、gzip压缩、history404问题

文章目录写在前面build 视图分析依赖文件第三方库CDN引入依赖文件分包gzip压缩文件部署前配置history路由模式的404问题最后写在前面 vue项目在线下环境开发完成后,我们就需要项目的打包上线了,除了要知道打包命令npm run build 之外,我们还…

前端之vue3使用WebSocket

vue3使用WebSocketWebSocketWebSocket说明WebSocket图示客户端使用WebSocketvue3中, 客户端使用WebSocket步骤更多方法WebSocket WebSocket说明 WebSocket 是全双工网络通信通信协议,实现了客户端和服务器的平等对话,任何一方都可以主动发送数据。并且…

Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案

流文件乱码问题解决方案问题介绍:一、前端方式解决:二、后端方式解决:三、文件预览实现四、点击按钮打开新窗口预览问题介绍: 打开或者预览全是乱码。预览pdf如下图: 解决办法: 1. 后端接口返回的blob文…