探讨uniapp的路由与页面栈及参数传递问题

这篇具有很好参考价值的文章主要介绍了探讨uniapp的路由与页面栈及参数传递问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1首先引入页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
页面的路由操作无非:初始化、打开新页面、页面重定向、页面返回、tab切换、重加载。

2页面路由

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

2.1navigator

页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器

  • 跳转tabbar页面,必须设置open-type=“switchTab”

3 路由跳转

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 不能在 App.vue 里面进行页面跳转。

3.1 navigate

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
初始状态:
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
点击页面跳转几次:
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
注意传值问题:是可以传值的
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
我们使用出栈操作 uni.navigateBack
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器

3.2 redirect

关闭当前页面,跳转到应用内的某个页面。

toNavigate() {
	uni.redirectTo({
		url: '/pages/one/one?name=FOUR'
	});
},

探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
注意:这里页面回退操作将无法起作用,因为页面栈中已经不存在之前的页面了!!!
那么这里会传值过来吗?我们验证一下: 是可以的
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器

3.3 switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

首先我们验证非tarbar页面的跳转:

toNavigate() {
	uni.switchTab({
		url: '/pages/one/one?name=INDEX'
	});
},

这里将报错:switchTab:fail can not switch to no-tabBar page
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
我们这里跳转tarbar页面:
首先我们配置一下tarbar的配置:
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
针对跳转tarbar页面的路由传值问题:这里是不会传值的
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器

3.4 reLaunch

关闭所有页面,打开到应用内的某个页面。
针对于 tarbar页面
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器
针对于非tarbar页面 与上面的行为保持一致
探讨uniapp的路由与页面栈及参数传递问题,uni-app相关知识,uni-app,java,服务器文章来源地址https://www.toymoban.com/news/detail-674438.html

到了这里,关于探讨uniapp的路由与页面栈及参数传递问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp,vue3路由传递接收参数

    官网vue2升vue3的教程中,演示了如何使用onLoad,记得把官网所有内容都看一遍!!! 传递对象参数 接收对象参数

    2024年02月15日
    浏览(43)
  • uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新

    返回上一个打开的页面并传递一个参数。有种办法就是使用 假如从B页面返回A页面: 经过测试,在uni.app中使用B页面使用setData设置A页面参数无法实现(应该是被更改为常量属性了)。 打印console.log(prevPage)前一页面对象可得: 方法1:我们可以使用A页面原有方法 B页面传递:

    2024年02月16日
    浏览(62)
  • 微信小程序路由以及跳转页面传递参数

    路由 在app.json的pages里面写 \\\"pages/页面/页面\\\" 直接保存pages直接生成非常方便  跳转页面 wx.navigateTo() 保留当前页面,跳转到应用内的某个非tabBar页面。 text bindtap=\\\"daka\\\"点击/text 会保留返回箭头 底部导航跳转在app.json写入即可 传参以及接收参数 1、本地存储 使用方法:和js差不

    2024年02月11日
    浏览(56)
  • 探讨uniapp的navigator 页面跳转问题

    navigator 页面跳转。该组件类似HTML中的 a 组件,但只能跳转本地页面。目标页面必须在pages.json中注册。 保留当前页面【当前页面就被隐藏了】,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 但是这里遇到这样一个问题: navigateTo:fail can not navigateTo a tabbar

    2024年02月13日
    浏览(48)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(77)
  • uniapp,转微信小程序,获取当前页面的 路由、路由参数

    uniapp 获取当前路由信息跟 vue 不同,它没有 route 对象。 uniapp 转成小程序后是这样的 当前页面展示的路由信息就是上一条中获取到的 pages 的最后一条路由,即 它的内容是: 当前路由的参数 在 currentRoute.options 中 比如 index?type=diarydiaryid=123 的 options 就是 而 当前页面的完整路

    2024年02月14日
    浏览(90)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(59)
  • H5向uni-app小程序传递参数

    1.script src=\\\"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js\\\"/script 本地下载包引入也可以。  2.传递参数。 3.接收参数。 @message=\\\"handleMessage\\\"   获取当前数据是一个数组,每次获取让数组长度-1就是你需要的数据。

    2024年02月13日
    浏览(53)
  • uni-app——使用uni.navigateTo传递对象参数

    文章目录 一、 传递一般参数 二、 传递对象参数 1. 传递参数 2. 接收参数 navigateTo进行页面传递参数,在下一个页面接收数据,一般在在onLoad钩子函数中获取

    2024年02月13日
    浏览(61)
  • 微信小程序页面传递参数方法

            页面跳转方法有很多中,但经常会通过一个页面传递参数给另一个页面,非常的常见。但数据量大的时候,通常用字符串传递,但会显得过于臃肿,下面介绍页面传递参数的各种方式。 例如:A跳转到B页面携带参数 特点:只能传递单个页面,数据量少 当然,如果过

    2024年02月03日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包