一、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页面跳转方式内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

uni-app常用的几种页面跳转方式总结的更多相关文章

  1. vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    这篇文章主要介绍了vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. 微信小程序实现页面导航的方法详解

    这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握如何使用页面之间的导航跳转,感兴趣的可以了解一下

  3. js 页面执行时间计算代码

    一个可以用来计算当前页面的执行时间,方便控制页面的大小等一系列影响页面执行效率的东西

  4. 关于Vue3路由push跳转问题(解决Vue2this.$router.push失效)

    这篇文章主要介绍了Vue3路由push跳转问题(解决Vue2this.$router.push失效),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. uni-app分包项目实战总结

    在使用uniapp开发过程中,随着我们的代码工程越来越大,必然会面临一个问题,就是打出来的包会越来越大,下面这篇文章主要给大家介绍了关于uni-app分包项目实战的相关资料,需要的朋友可以参考下

  6. 在jsp页面中响应速度提高的7种方法分享

    这篇文章介绍了在jsp页面中响应速度提高的7种方法,有需要的朋友可以参考一下

  7. 详解php实现页面静态化原理

    本篇文章主要介绍了详解php实现页面静态化原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. JSP页面间传值问题实例简析

    这篇文章主要介绍了JSP页面间传值问题,结合实例形式简单分析了JSP页面中使用get方式传值的使用技巧,需要的朋友可以参考下

  9. jsp页面中引用其他页面的简单方法

    下面小编就为大家带来一篇jsp页面中引用其他页面的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. jquery 仿锚点跳转到页面指定位置的实例

    下面小编就为大家带来一篇jquery 仿锚点跳转到页面指定位置的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部