当前位置: 首页 > news >正文

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

1首先引入页面栈

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

在这里插入图片描述
页面的路由操作无非:初始化、打开新页面、页面重定向、页面返回、tab切换、重加载。

2页面路由

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

2.1navigator

页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册
在这里插入图片描述
在这里插入图片描述

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

3 路由跳转

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

3.1 navigate

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
在这里插入图片描述
初始状态:
在这里插入图片描述
点击页面跳转几次:
在这里插入图片描述
注意传值问题:是可以传值的
在这里插入图片描述
我们使用出栈操作 uni.navigateBack
在这里插入图片描述

3.2 redirect

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

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

在这里插入图片描述
注意:这里页面回退操作将无法起作用,因为页面栈中已经不存在之前的页面了!!!
那么这里会传值过来吗?我们验证一下: 是可以的
在这里插入图片描述

3.3 switchTab

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

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

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

这里将报错:switchTab:fail can not switch to no-tabBar page
在这里插入图片描述
我们这里跳转tarbar页面:
首先我们配置一下tarbar的配置:
在这里插入图片描述
针对跳转tarbar页面的路由传值问题:这里是不会传值的
在这里插入图片描述

3.4 reLaunch

关闭所有页面,打开到应用内的某个页面。
针对于 tarbar页面
在这里插入图片描述
针对于非tarbar页面 与上面的行为保持一致
在这里插入图片描述

http://www.lryc.cn/news/145810.html

相关文章:

  • 字节一面:你能讲一下跨域吗
  • leetcode 563.二叉树的坡度
  • 【第1章 数据结构概述】
  • 【附安装包】MyEclipse2019安装教程
  • poi-tl设置图片(通过word模板替换关键字,然后转pdf文件并下载)
  • [element-ui] el-tree 懒加载load
  • 【C++】使用 nlohmann 解析 json 文件
  • Nginx到底是什么,他能干什么?
  • 如何判断一个java对象还活着
  • Go语言基础之结构体
  • 前端食堂技术周刊第 96 期:2023 CSS 状态、Nuxt 3.7、TypeScript 5.2、eBay 性能优化、贝塞尔曲线
  • 一文总结Redis知识点
  • ARM寄存器组
  • Windows查看当前文件夹下的所有.c文件的个数
  • ubuntu Qt 地图离线调用
  • Android Studio升级到Android API 33版本后,XML布局输入没有提示
  • 操作XML(带命名空间)
  • 二叉搜索树(C++)
  • 软件架构知识点
  • C语言日常刷题6
  • 微信小程序使用stomp.js实现STOMP传输协议的实时聊天
  • 基于饥饿游戏算法优化的BP神经网络(预测应用) - 附代码
  • [ 云计算 | AWS ] Java 应用中使用 Amazon S3 进行存储桶和对象操作完全指南
  • 【Spring Boot】Spring Boot 配置 Hikari 数据库连接池
  • MR混合现实石油化工课堂情景实训教学演示
  • php thinkphp 抖音支付,订单同步接口分享
  • excel功能区(ribbonx)编程笔记--2 button控件与checkbox控件
  • JavaScript 知识点
  • 深入理解 JVM 之——动手编译 JDK
  • [移动通讯]【Carrier Aggregation in LTE】【 Theory + Log analysis-1】