您的当前位置:首页>全部文章>文章详情

【Uniapp】uniapp页面跳转的五种方式总结

CrazyPanda发表于:2024-03-26 09:14:53浏览:383次TAG:

一、uni.navigateTo

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

使用:

// 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

定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数)

使用:

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


三、uni.reLaunch

定义:关闭所有页面,打开到应用内的某个页面(可带参数)

使用:

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

四、uni.switchTab

定义:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

使用:

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

五、uni.navigateBack

定义:关闭当前页面,返回上一页面或多级页面

使用:

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

总结

  • navigateTo, redirectTo 只能打开非 Tab 页面,可传参。

  • switchTab 只能打开 Tab 页面,不可传参。

  • reLaunch 可以打开任意页面,可传参。


    猜你喜欢

    【UniApp】uniapp 中使用addEventListener
    uniapp 中使用 addEventListener 方法可以给某个元素绑定事件监听。使用方法:document.getElementById("some-element").addEventListener("click", function() {   // do something when the element is clicked }
    发表于:2023-12-13 浏览:540 TAG:
    【UniApp】uniapp怎么去除子页面的左侧返回
    随着移动设备在人们生活中使用越来越广泛,移动应用的需求也愈发增长。近年来,由于跨端技术的发展,多端混合应用开发成为了主流,uniapp就是其中的佼佼者。然而,在开发uniapp应用时,我们可能会遇到一些问题,比如如何去除子页面的左侧返回按钮。在uniapp中,每当我们打开一个新的页面,都会在左上角出现一个返回按钮,点击该按钮即可返回到上一页。但是,如果我们在某些场景中不希望显示这个返回按钮,就需要去除它。下面,我将介绍两种方法来实现这一功能。一、使用导航栏组件uniapp提供了一个导航
    发表于:2023-12-25 浏览:307 TAG:
    【UniApp】如何在uniapp中实现智能推荐和个性化推送
    如何在uniapp中实现智能推荐和个性化推送随着移动互联网的快速发展,用户在使用手机应用的过程中,希望能够得到个性化、智能化的推荐服务。在uniapp框架中,我们可以利用一些常用的技术手段,实现智能推荐和个性化推送功能。本文将介绍如何在uniapp中实现这两个功能,并提供具体的代码示例。一、智能推荐算法智能推荐是一种根据用户的行为和偏好,自动给用户推荐最相关的内容。常见的智能推荐算法有基于协同过滤的算法、基于内容的算法和基于深度学习的算法。在uniapp中,我们可以使用uniCloud
    发表于:2023-12-24 浏览:341 TAG:
    【UniApp】最新使用uniapp本地打包APP安卓,已排坑
    uniapp打包IOS!!!1. 生成本地打包资源 2. 下载Android Studio和App离线SDK导航路径:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android下载的Android 离线SDK与本地开发工具版本对应 3. 解压得到的目录如下4. 使用Android Studio打开Android 离线SDK解压目录里面这个文件夹,这个是示例项目,我们只需要更改这个项目的一些配置,其他配置HBuilderX已经配置好了5.
    发表于:2023-12-21 浏览:357 TAG:
    【UniApp】利用uniapp实现表格导出功能
    利用uniapp实现表格导出功能随着移动互联网的快速发展,手机已经成为人们日常生活不可或缺的工具之一。而作为开发者,我们也需要不断提供更多的功能和便利性满足用户的需求。其中,表格导出功能是一个常见的需求,用户希望能够将数据导出为Excel或CSV文件,以便于在电脑上进行进一步处理。在uniapp中,通过一些组件和第三方库的运用,我们可以轻松地实现表格导出功能。以下将给出具体的代码示例,帮助开发者快速上手。引入xlsx库在uniapp项目的main.js文件中,可以通过npm包管理工具安
    发表于:2023-12-23 浏览:331 TAG:
    【UniApp】如何在uniapp中实现页面间的传参和回传
    如何在uniapp中实现页面间的传参和回传一、传参在uniapp中,我们可以通过路径传参、props传参和vuex传参的方式实现页面间的参数传递。路径传参路径传参指的是在跳转到另一个页面时,将参数直接拼接在URL后面传递。在跳转时,我们通过在URL后面加上参数的方式将参数传递给下一个页面,在下一个页面可以通过uni.getStorageSync()方法获取参数的值。// 页面A uni.navigateTo({   url: '/page
    发表于:2023-12-23 浏览:332 TAG:
    【UniApp】uniapp路由跳转传递与接收参数
    Uniapp 是一个基于 Vue.js 的跨平台开发框架,它允许开发者使用一套代码来同时构建 iOS、Android、H5 等多个平台的应用。在 Uniapp 中,路由传参是非常常见的需求,它可以让页面之间进行数据的传递和交互。下面是对 Uniapp 路由传参的详细解析一、传递参数在 Uniapp 中,可以通过两种方式来传递参数:1.通过 URL 参数传递通过在 URL 中添加参数的方式传递数据,可以在目标页面中通过 $route.query 获取传递过来的参数。例如,在 A 页面中跳转到 B
    发表于:2023-12-13 浏览:399 TAG:
    【UniApp】uniapp的标题怎么动态修改
    Uniapp是一个基于Vue.js框架的跨平台开发工具,它可以将一个项目一次性编译成多个平台的应用程序,同时还提供了一些独特的功能,如动态修改标题等。在Uniapp中,我们可以很容易地实现动态修改标题的功能,具体方法如下:首先,在Vue组件中,我们可以使用mounted函数来获取到当前的页面实例,然后使用$refs属性来获取到头部组件中的标题组件,接着我们就可以使用this.$refs.title对象来对标题进行修改。示例代码如下:mounted() {  &nbs
    发表于:2023-12-22 浏览:330 TAG:
    【UniApp】Uniapp中如何实现左右点击滚动功能
    uniapp是一款基于Vue.js的跨平台应用框架,可以同时开发iOS、Android、H5、小程序等多个平台的应用程序。其中,滚动操作在Uniapp中是一项很常见的操作,今天我们来讨论在Uniapp中如何实现左右点击滚动。一、背景介绍在Uniapp的实际应用中,我们常常会遇到需要在页面中实现左右滚动操作的需求。例如,移动端的导航菜单或者横向的图片滚动,都需要使用左右点击滚动来实现。那么,在Uniapp中如何实现这种左右点击滚动的效果呢?接下来我们将用详细的步骤来解答这个问题。二、实现
    发表于:2023-12-17 浏览:315 TAG:
    【UniApp】uniapp 软键盘不自动关闭怎么解决
    随着移动互联网的发展,使用框架、工具来快速开发APP的方式成为主流,uniapp作为跨平台的开发框架在开发中有着不可替代的作用,它可以支持多种平台,同时拥有着方便快捷、代码复用率高等优点。在uniapp开发中,软键盘的使用是非常常见的,但是,有时候开发者会遇到软键盘不自动关闭的问题,这就会导致用户在使用APP时的体验差,本文将介绍如何解决uniapp软键盘不自动关闭的问题。一、问题概述在开发uniapp过程中经常会使用input元素进行输入数据,这时候键盘会自动弹出,并自动关闭,在某些
    发表于:2023-12-17 浏览:410 TAG: