1、uniapp常用页面跳转方式

本文介绍uni-app中页面导航方法,包括保留当前页面跳转、关闭当前页面返回及跳转、切换tabBar页面等,并讲解如何实现路由传值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

methods: {
    //fn()为点击响应事件
    fn(){
        uni.navigateTo({
            //保留当前页面,跳转到应用内的某个页面
            url: '/pages/detail/detail'
        })
    }
}

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

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

​methods: {
    //goBack()为点击响应事件
    goBack(){
        uni.navigateBack({
            //关闭当前页面,返回上一页面或多级页面。
            delta:1
        });
    }
}

3、uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)                                                                       关闭当前页面,跳转到应用内的某个页面

​methods: {
    //fn()为点击响应事件
    fn(){
        uni.redirectTo({
            //关闭当前页面,跳转到应用内的某个页面。
            url:'/pages/about/about'
        });
    }
}

4、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' //显示的图标
					});
				}
            } 
        })    
 
    }
}

5、openURL

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

​methods: {
    //fn()为点击响应事件
    fn(){
        boid plus.runtime.openURL('https://www.baidu.com/')
    }
}

6、路由传值与接收

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

//跳转页面

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


uni.navigateTo({
    url:'/pages/foodDetail/index?foodId='+ JSON.stringify(e),
})

注意:传入键值对的值为对象需要使用JSON.stringify才可以在跳转的页面接收到想要的值,
键值对的值为简单数据可以不用

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值