uniapp页面跳转的几种方式

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

uniapp页面跳转的几种方式


一、uni.navigateTo

  1. 定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
  2. 使用:
    uniapp跳转页面,uniapp专栏,uni-app,javascript,前端
// 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. 使用:
    uniapp跳转页面,uniapp专栏,uni-app,javascript,前端
uni.redirectTo({
  url:'./home/index'
});

三、uni.reLaunch

  1. 定义:关闭所有页面,打开到应用内的某个页面(可带参数)
  2. 使用:
    uniapp跳转页面,uniapp专栏,uni-app,javascript,前端
uni.reLaunch({
    url:'./home/index'
});

四、uni.switchTab

  1. 定义:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  2. 使用:
    uniapp跳转页面,uniapp专栏,uni-app,javascript,前端
uni.switchTab({
   url:'./home/index'
});

五、uni.navigateBack

  1. 定义:关闭当前页面,返回上一页面或多级页面
  2. 使用:
    uniapp跳转页面,uniapp专栏,uni-app,javascript,前端
uni.navigateBack({
    url:'./home/index'
});
uni.navigateBack({
	delta: 2
});

总结

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

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

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

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

相关文章

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

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

    2024年02月11日
    浏览(45)
  • 利用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日
    浏览(36)
  • taro跳转页面传参的几种方式

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

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

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

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

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

    2024年02月11日
    浏览(36)
  • 【Qt专栏】实现单例程序,禁止程序多开的几种方式

    目录 一,简要介绍 二,实现示例(Windows) 1.使用系统级别的互斥机制 2.通过共享内存(进程间通信-IPC) 3.使用命名互斥锁(不推荐) 4.使用文件锁 5.通过网络端口检测 前言 禁止程序多开,也称为“单实例应用程序”或“单例应用程序”,是指通过各种手段防止同一个应用

    2024年02月10日
    浏览(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日
    浏览(37)
  • H5页面跳转到小程序的几种实现方法

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

    2024年02月15日
    浏览(36)
  • uni-app - 实现监听路由跳转,每次跳转的时候都能触发的事件(当页面路由发生变化时,触发一个封装好的请求接口或普通功能函数)全端兼容,高效简洁无 BUG 详细教程

    当用户点击任意页面时(路由发生变化),自动执行一个函数,调用接口请求数据、做任何事情。 由于涉及到全部页面,必须采用统一的入口和统一的执行函数,不可能一个页面写一次!! 基于这个需求,本文实现了 全局统一监听路由跳转,当页面发生变化时自动触发某个

    2024年02月11日
    浏览(42)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包