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

 更新时间:2022年08月26日 09:44:11   作者:丿TK丶灬丨爱悦  
uni-app的页面跳转和小程序和vue很相似,只是方法和标签有所不同,这篇文章主要给大家介绍了关于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
    }

总结

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

相关文章

  • JavaScript实现滑块验证案例

    JavaScript实现滑块验证案例

    这篇文章主要为大家详细介绍了JavaScript实现滑块验证案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JavaScript实现前端倒计时效果

    JavaScript实现前端倒计时效果

    这篇文章主要为大家详细介绍了JavaScript实现前端倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 浅谈Javascript事件对象

    浅谈Javascript事件对象

    本文主要介绍了Javascript事件对象的相关实例。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Uniapp中使用Echarts的详细过程

    Uniapp中使用Echarts的详细过程

    这篇文章主要介绍了Uniapp中使用Echarts的示例详解这里只举例折线图,介绍了uni-app微信小程序使用echarts的方法,下载echart组件,可以先随便建个文件夹,然后 npm init,接着下载依赖,需要的朋友可以参考下
    2022-11-11
  • ESLint和Jest中使用esm示例详解

    ESLint和Jest中使用esm示例详解

    这篇文章主要为大家介绍了ESLint和Jest中使用esm示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • javascript 事件处理程序介绍

    javascript 事件处理程序介绍

    javascript 事件处理程序介绍,学习js的朋友可以参考下
    2012-06-06
  • JavaScript控制listbox列表框的项目上下移动的方法

    JavaScript控制listbox列表框的项目上下移动的方法

    这篇文章主要介绍了JavaScript控制listbox列表框的项目上下移动的方法,实例分析了javascript操作listbox列表框的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • js 字符串转换成数字的三种方法

    js 字符串转换成数字的三种方法

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全
    2013-03-03
  • JavaScript Array.flat()函数用法解析

    JavaScript Array.flat()函数用法解析

    这篇文章主要介绍了JavaScript Array.flat()函数用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • javascript如何判断输入的url是否正确

    javascript如何判断输入的url是否正确

    这篇文章主要介绍了javascript如何判断输入的url是否正确,需要的朋友可以参考下
    2014-04-04

最新评论