uniapp页面跳转的几种方式 以及举例(2)

这篇具有很好参考价值的文章主要介绍了uniapp页面跳转的几种方式 以及举例(2)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

又来混时长 嫖流量卷了

一,uni.navigateTo(OBJECT)

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

uniapp页面跳转的几种方式 以及举例(2),Uniapp,uni-app,前端

// 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(OBJECT)

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

uniapp页面跳转的几种方式 以及举例(2),Uniapp,uni-app,前端

uni.redirectTo({
  url:'./home/index'
});

 

三,uni.reLaunch(OBJECT)

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

uniapp页面跳转的几种方式 以及举例(2),Uniapp,uni-app,前端

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

四,uni.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

uniapp页面跳转的几种方式 以及举例(2),Uniapp,uni-app,前端

uni.switchTab({
   url:'./home/index'
});

五,uni.navigateBack(OBJECT)

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

uniapp页面跳转的几种方式 以及举例(2),Uniapp,uni-app,前端

uni.navigateBack({
    url:'./home/index'
});
uni.navigateBack({
	delta: 2
});

 注意!

navigateTo, redirectTo 只能打开非 Tab 页面,可传参。
switchTab 只能打开 Tab 页面,不可传参。
reLaunch 可以打开任意页面,可传参。文章来源地址https://www.toymoban.com/news/detail-804674.html

到了这里,关于uniapp页面跳转的几种方式 以及举例(2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中路由跳转的几种方式

    2、第二种也是比较常见的,使用标签跳转: 3、第三种是使用replace跳转: 4、第四种是使用go方式跳转:

    2024年02月11日
    浏览(57)
  • 利用vue-router跳转的几种方式

    ​1 router-link 2 this.$router.push     跳转到指定路径,并将跳转页面压入history栈中,也就是添加了一个页面记录。 3 this.$router.replace     跳转到指定路径,将history栈中的当前页面替换为跳转到的页面。 4 this.$router.go(n)     在histroy栈中向前或者向后跳转n个页面,n可为正整数或负

    2024年02月12日
    浏览(49)
  • taro跳转页面传参的几种方式

    我之前在网上也搜了挺多taro传参的方式,这里我总结一下 路由跳转分Taro.navigateTo与Taro.redirectTo, 但是这两种方法只适用于传递少量参数 Taro.navigateTo跳转时是将新的页面加载过来,最多加载到10层,返回时去的是上一页; Taro.redirectTo跳转的同时将当前页面销毁,返回时去的是

    2024年02月07日
    浏览(49)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(49)
  • uniapp路由跳转的六种方式

    uniapp官方文档详解: 一、uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 注意: 页面跳转路径有层级限制,不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 二、uni.redirectTo关闭当前页面,跳转到应用内的某个页面。

    2024年02月11日
    浏览(45)
  • SpringMVC的常用注解,参数传递以及页面跳转的使用

    目录 slf4j 常用注解 @RequestMapping @RequestParam @RequestBody @PathVariable 参数传递  首先在pom.xml配置文件中导入SLF4J的依赖 基础类型+String   复杂类型 @RequestParam @PathVariable @RequestBody  增删改查  返回值 void返回值  String返回值 model+String   页面跳转 --转发和重定向 SLF4J,简单日志门面

    2024年02月09日
    浏览(42)
  • vue跳转页面的几种常用方法

    目录 vue跳转不同页面的方法 1.router-link跳转 2.this.$router.push() 3.a标签可以跳转外部链接,不能路由跳转 vue三种不同方式实现跳转页面 Vue:router-link this.$router.push(\\\"/\\\") this.$router.go(1) 代码示例: !-- 直接跳转 -- router-link to=\\\'/testC\\\'  button点击跳转2/button /router-link   !-- 带参数跳转

    2024年02月11日
    浏览(48)
  • H5页面跳转到小程序的几种实现方法

    可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme 使用示例 服务端配置好接口,客户端调用接口传入目标小程序的path路径 这种适用于运行在微信环境的自定义H5页面,将跳转按钮融合在自研H5应用,点击按钮后跳

    2024年02月15日
    浏览(46)
  • Taro + vue3 + js + nutUI 框架中自定义tabbar的组件封装以及页面跳转的逻辑

    1.需求:   在H5 中需要封装一个自定义的tabbar 菜单跳转 通过nut-ui 进行二次封装 2. 注意点   H5 中原生的tabbar 在ios 中会出现问题 所以进行 封装tabbar 3. 代码操作 首先全部的代码  4.解析 tabList: 菜单的内容数组  根据自己菜单的数量 来决定 const tabList = reactivemenu[]([     {    

    2024年04月17日
    浏览(53)
  • 手机web前端调试页面的几种方式

    PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂、从模拟调试到远程调试,大概分为几部分: 1、Chrome DevTools(谷歌浏览器)的模拟手机调试 2、weinre(web inspector remote)远程调试工具 3、微信的“web开发者工具”,集成了Chrome DevTools和weinre,做的比较好

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包