深圳网站优化软件,什么是seo优化的有哪些,天润网站建设,太原论坛网站开发公司目录 一、标签跳转--- 把跳转的信息写在标签当中1. a标签2. navigator标签 二、API跳转[编程式]-----通过方法 js方式跳转1. uni.navigateTo2. uni.redirectTo3. uni.switchTab4. uni.reLaunch5. uni.navigateBack 总结 Uniapp是一款基于Vue.js的跨平台开发框架#xff0c;允许… 目录 一、标签跳转--- 把跳转的信息写在标签当中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自定义的路由格式。
!-- 相对路径跳转 --
a href../pages/index/index跳转到首页/a!-- 绝对路径跳转 --
a href/pages/index/index跳转到首页/a2. 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手指松开后点击态保留时间单位为毫秒。
!-- 相对路径跳转 --
navigator url../pages/index/index hover-classnavigator-hover跳转到首页/navigator!-- 绝对路径跳转 --
navigator url/pages/index/index hover-classnavigator-hover跳转到首页/navigator!-- 传递参数 --
navigator url/pages/detail/detail?id123nameuniapp hover-classnavigator-hover跳转到详情页/navigator二、API跳转[编程式]-----通过方法 js方式跳转
除了标签跳转外Uniapp还提供了一些API供开发者使用实现页面跳转的功能。下面介绍几个常用的API。
1. uni.navigateTo
uni.navigateTo是Uniapp中用于跳转到新页面的API可以传递参数支持uni-app自定义的路由格式。跳转后新页面会被加入页面栈可以通过uni.navigateBack返回上一个页面。
uni.navigateTo({url: /pages/detail/detail?id123nameuniapp,success: function () {console.log(跳转成功)}
})2. uni.redirectTo
uni.redirectTo是Uniapp中用于关闭当前页面并跳转到新页面的API可以传递参数支持uni-app自定义的路由格式。跳转后新页面会替换当前页面不会被加入页面栈无法通过uni.navigateBack返回上一个页面。
uni.redirectTo({url: /pages/detail/detail?id123nameuniapp,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等。
