[uniapp页面路由跳转]详细讲解uniapp中使用标签和的api完成页面跳转使用方法代码注释

2024-07-12 01:49| 来源: 网络整理| 查看: 265

目录一、标签跳转--- 把跳转的信息写在标签当中1. a标签2. navigator标签二、API跳转[编程式]-----通过方法 js方式跳转1. uni.navigateTo2. uni.redirectTo3. uni.switchTab4. uni.reLaunch5. uni.navigateBack 总结

Uniapp是一款基于Vue.js的跨平台开发框架，允许开发者使用同一套代码构建多个平台的应用程序，包括iOS、Android、Web、微信小程序、支付宝小程序、百度小程序、头条小程序等。在Uniapp中，页面跳转是非常重要的功能之一，本文将详细介绍Uniapp中页面跳转的各种标签和API的使用方法，同时附上代码注释，方便开发者理解和使用。

一、标签跳转— 把跳转的信息写在标签当中 1. a标签

a标签是HTML中最常见的跳转标签，Uniapp也支持在页面中使用a标签进行跳转。需要注意的是，a标签的href属性只支持相对路径和绝对路径，不支持uni-app自定义的路由格式。

跳转到首页跳转到首页 2. navigator标签

navigator标签是Uniapp中专门用于页面跳转的标签，支持uni-app自定义的路由格式，可以通过url参数传递数据。navigator标签有以下几个属性：

url：跳转的目标页面路径，支持相对路径和绝对路径。open-type：跳转方式，可选值为navigate、redirect、switchTab、reLaunch、navigateBack。delta：返回的页面数，仅当open-type为navigateBack时生效。hover-class：点击时的样式类。hover-stop-propagation：是否阻止事件冒泡。hover-start-time：按住后多久出现点击态，单位为毫秒。hover-stay-time：手指松开后点击态保留时间，单位为毫秒。跳转到首页跳转到首页跳转到详情页二、API跳转[编程式]-----通过方法 js方式跳转

除了标签跳转外，Uniapp还提供了一些API供开发者使用，实现页面跳转的功能。下面介绍几个常用的API。

1. uni.navigateTo

uni.navigateTo是Uniapp中用于跳转到新页面的API，可以传递参数，支持uni-app自定义的路由格式。跳转后新页面会被加入页面栈，可以通过uni.navigateBack返回上一个页面。

uni.navigateTo({ url: '/pages/detail/detail?id=123&name=uniapp', success: function () { console.log('跳转成功') } }) 2. uni.redirectTo

uni.redirectTo是Uniapp中用于关闭当前页面并跳转到新页面的API，可以传递参数，支持uni-app自定义的路由格式。跳转后新页面会替换当前页面，不会被加入页面栈，无法通过uni.navigateBack返回上一个页面。

uni.redirectTo({ url: '/pages/detail/detail?id=123&name=uniapp', success: function () { console.log('跳转成功') } }) 3. uni.switchTab

uni.switchTab是Uniapp中用于跳转到tabBar页面的API，只能跳转到tabBar页面，无法跳转到非tabBar页面。跳转后新页面会被加入页面栈，可以通过uni.navigateBack返回上一个页面。

uni.switchTab({ url: '/pages/index/index', success: function () { console.log('跳转成功') } }) 4. uni.reLaunch

uni.reLaunch是Uniapp中用于关闭所有页面并跳转到新页面的API，可以传递参数，支持uni-app自定义的路由格式。跳转后新页面会替换所有页面，不会被加入页面栈，无法通过uni.navigateBack返回上一个页面。

uni.reLaunch({ url: '/pages/index/index', success: function () { console.log('跳转成功') } }) 5. uni.navigateBack

uni.navigateBack是Uniapp中用于返回上一个页面的API，可以传递delta参数指定返回的页面数，默认为1。

uni.navigateBack({ delta: 2, success: function () { console.log('返回成功') } }) 总结

官网的文档Uniapp官网的路由讲解官网的文档Uniapp官网的navigator讲解本文详细介绍了Uniapp中页面跳转的各种标签和API的使用方法，包括a标签、navigator标签、uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch、uni.navigateBack等。

【本文地址】

公司简介

联系我们

[uniapp页面路由跳转]详细讲解uniapp中使用标签和的api完成页面跳转使用方法 代码注释

[uniapp页面路由跳转]详细讲解uniapp中使用标签和的api完成页面跳转使用方法代码注释