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

目录
  • 一、uni.navigateTo(OBJECT)
  • 二、uni.navigateBack(OBJECT)
  • 三、uni.redirectTo(OBJECT)
  • 四、uni.switchTab(BOJECT)
  • 五、openURL
  • 补充：传值与接收
  • 总结

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

赞 (0)

相关推荐

  • 浅谈uniapp页面跳转的解决方案

    浅谈uniapp页面跳转的解决方案

    目录 1.uniapp常用跳转API 2.微信小程序页面跳转API 3.其他页面跳转回tabbar页面的方法 4.页面来回跳转保持数据的方法 正常的页面跳转的api大家应该都清楚,但是涉及到多页面来回跳转以及返回到导航页的时候就需要一些技巧来进行处理,之前找了挺多文章也没有很详细的介绍,本文就详细说说页面跳转的那些事. 1.uniapp常用跳转API API 作用 uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面. uni.

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

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

    目录 一.uni.navigateTo(OBJECT) 二.uni.navigateBack(OBJECT) 三.uni.redirectTo(OBJECT) 四.uni.switchTab(BOJECT) 五.openURL 补充:传值与接收 总结 一.uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面 uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io) method

  • springMVC几种页面跳转方式小结

    前面已经了解了Controller的几种配置方式 今天主要写一下响应界面跳转的几种方式 1.在注解的方式中 1.1通过HttpServletResponse的API直接输出(不需要配置渲染器) controller类的主要代码 @Controller public class RequestController{ @RequestMapping("/resp") public void handleRequest(HttpServletRequest req, HttpServletR

  • java servlet 几种页面跳转的方法

    Servlet: 当然,在servlet中,一般跳转都发生在doGet, doPost等方法里面. 1) redirect 方式 response.sendRedirect("/a.jsp"); 页面的路径是相对路径.sendRedirect可以将页面跳转到任何页面,不一定局限于本web应用中,如: response.sendRedirect("http://www.jb51.net"); 跳转后浏览器地址栏变化. 这种方式要传值出去的话,只能在url中带param

  • SpringBoot 错误页面跳转方式

    目录 SpringBoot错误页面跳转 一.新增配置类 二.错误页面跳转控制器 SpringBoot自定义错误页面 一.错误页面 二.处理过程 SpringBoot错误页面跳转 SpringBoot实现MVC 404.500等错误时跳转自定义页面 一.新增配置类 package com.study.demo.config; import org.springframework.boot.web.server.ErrorPage; import org.springframework.boot.w

  • extJS中常用的4种Ajax异步提交方式

    /** 复制代码 代码如下: * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */ function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_save.action', method : 'post', params : { userName : document.getElementById('userName').val

  • 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 复制代码 代码如下: <meta http-equiv="refresh" content="0.1; url=http://jb51.net/"> 2.Javascript实现 方法一: 这个方法比较常用 复制代码 代码如下: window.location.href = "http://jb51.net/"; 方法二: 复制代码 代

  • php开发中的页面跳转方法总结

    页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自动跳转在WEB开发中经常用到,而且根据需求可以采用不同的跳转方式,比如提示操作信息后延时跳转等, 本文总结了WEB开发中常见的几种页面跳转方法. PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = "http://www.jb51.net/"; header( &qu

  • Shiro中session超时页面跳转的处理方式

    目录 session超时页面跳转的处理 问题描述 ajax请求超时处理 非ajax请求超时跳转 一个判断session是否过期的小技巧 1.session其实就是一个Map 2.session的过期时间是从什么时候开始计算的? 3.设置session的失效时间 4.如何判断session过没过期 session超时页面跳转的处理 问题描述 shiro在管理session后,在session超时会进行跳转,这里有两种情况需要考虑,一种是ajax方式的请求超时,一种页面跳转请求的超时. 本文从这两个

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • vue跳转页面常用的4种方法与区别小结

    目录 1:router-link跳转 2:this.$router.push() 3. this.$router.replace() 4. this.$router.go(n) ps:区别 总结 vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下. 1:router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to=

随机推荐