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

目录

    • [一、标签跳转--- 把跳转的信息写在标签当中](#一、标签跳转--- 把跳转的信息写在标签当中)
      • [1. a标签](#1. a标签)
      • [2. navigator标签](#2. navigator标签)
    • [二、API跳转[编程式]-----通过方法 js方式跳转](#二、API跳转[编程式]-----通过方法 js方式跳转)
      • [1. uni.navigateTo](#1. uni.navigateTo)
      • [2. uni.redirectTo](#2. uni.redirectTo)
      • [3. uni.switchTab](#3. uni.switchTab)
      • [4. uni.reLaunch](#4. uni.reLaunch)
      • [5. uni.navigateBack](#5. uni.navigateBack)
    • 总结

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

一、标签跳转--- 把跳转的信息写在标签当中

1. a标签

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

html 复制代码
<!-- 相对路径跳转 -->
<a href="../pages/index/index">跳转到首页</a>

<!-- 绝对路径跳转 -->
<a href="/pages/index/index">跳转到首页</a>

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:手指松开后点击态保留时间,单位为毫秒。
html 复制代码
<!-- 相对路径跳转 -->
<navigator url="../pages/index/index" hover-class="navigator-hover">跳转到首页</navigator>

<!-- 绝对路径跳转 -->
<navigator url="/pages/index/index" hover-class="navigator-hover">跳转到首页</navigator>

<!-- 传递参数 -->
<navigator url="/pages/detail/detail?id=123&name=uniapp" hover-class="navigator-hover">跳转到详情页</navigator>

二、API跳转[编程式]-----通过方法 js方式跳转

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

1. uni.navigateTo

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

javascript 复制代码
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返回上一个页面。

javascript 复制代码
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返回上一个页面。

javascript 复制代码
uni.switchTab({
  url: '/pages/index/index',
  success: function () {
    console.log('跳转成功')
  }
})

4. uni.reLaunch

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

javascript 复制代码
uni.reLaunch({
  url: '/pages/index/index',
  success: function () {
    console.log('跳转成功')
  }
})

5. uni.navigateBack

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

javascript 复制代码
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等。

相关推荐
合作小小程序员小小店1 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏3 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
CRMEB定制开发5 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
today喝咖啡了吗12 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战13 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术18 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser18 小时前
uniapp页面间通信
uni-app
@Dream_Chaser1 天前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊1 天前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由1 天前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++