网络编程
位置:首页>> 网络编程>> JavaScript>> uni-app常用的几种页面跳转方式总结

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

作者:丿TK丶灬丨爱悦  发布时间:2023-08-23 20:31:26 

标签:uni-app,页面,跳转

一、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
   }

来源:https://blog.csdn.net/qq_53966033/article/details/124538656

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com