返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uni-app常用的几种页面跳转方式总结
  • 421
分享到

uni-app常用的几种页面跳转方式总结

2024-04-02 19:04:59 421人浏览 安东尼
摘要

目录一、uni.navigateTo(OBJECT)二、uni.navigateBack(OBJECT)三、uni.redirectTo(OBJECT)四、uni.switchTab

一、uni.navigateTo(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
    //Gonavigate()为点击响应事件,可在html部分设置 @tap="gonavigate()"
    gonavigate(){
        uni.navigateTo({
            //保留当前页面,跳转到应用内的某个页面
            url: '/pages/detail/detail'
        })
    }
}

二、uni.navigateBack(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

​methods: {
    //goBack()为点击响应事件,可在HTML部分设置 @tap="goBack()"
    goBack(){
        uni.navigateBack({
            //关闭当前页面,返回上一页面或多级页面。
            delta:1
        });
    }
}

三、uni.redirectTo(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

​methods: {
    //goregirect()为点击响应事件,可在HTML部分设置 @tap="goregirect()"
    goregirect(){
        uni.redirectTo({
            //关闭当前页面,跳转到应用内的某个页面。
            url:'/pages/about/about'
        });
    }
}

四、uni.switchTab(BOJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
    checklogin(){
        uni.request({
            url: 'Http://localhost:8081/api/user/login',
            data: {
				email: this.emailone,
				passWord: this.password,
			},
			success: (res) => {
			    //登录成功
				if (res.data.success == true) {
					uni.showToast({
						title: '登录成功', //显示的文字
						icon: 'success' //显示的图标
				    });
				    //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
					uni.switchTab({
						url: '../tabbor/index/index'
					});
				} else {
					uni.showToast({
						title: '用户名或密码错误', //显示的文字
						icon: 'none' //显示的图标
					});
				}
            } 
        })    
 
    }
}

五、openURL

调用第三方程序打开指定的URL

HTML5+ API Reference (html5plus.org)

​methods: {
    //goopenurl()为点击响应事件,可在HTML部分设置 @tap="goopenurl()"
    goopenurl(){
        boid plus.runtime.openURL('https://www.baidu.com/')
    }
}

补充:传值与接收

通过跳转传值一般套路就是在URL中把需要传的值带过去,然后再接收的页面onLoad函数中,利用参数接回来。

跳转页面:

uni.navigateTo({
   url:'页面路径?id=1'
})

接收页面:

onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); 
//打印出上个页面传递的参数。传递的是id=1,则获取到的就是option.id
    }

总结

到此这篇关于uni-app常用的几种页面跳转方式的文章就介绍到这了,更多相关uni-app页面跳转方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uni-app常用的几种页面跳转方式总结

本文链接: https://lsjlt.com/news/166069.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作