小程序路由跳转

news2024/11/22 15:46:59

小程序中的路由只是单纯页面地址的跳转,一般在页面中使用 navigator 组件来实现,也有很多场景需要在 js 中根据逻辑的执行结果跳转到某个页面,比如:如果检测到用户尚未登录就需要给他跳转到登录页面

1.1navigate

navigate 跳转到一个新的页面,会新增一条历史记录,并且可以通过左上角的返回按钮实现返回操作

<navigator> 标签方式:

`pages/index/index.wxml`

<!-- open-type="navigate" 是默认值 -->
<navigator open-type="navigate" url="/pages/logs/logs">去日志页面</navigator>

js api 方式:

pages/index/index.js

wx.navigateTo({
  url: '/pages/logs/logs'
})

2.2wx.switchTab

如果要跳转的页面路径是一个 tabBar 的页时,不能使用 navigate。要使用 switchTab

新建 pages/cart/index

创建两个 tabbar

app.json

 

`<navigator>` 标签方式:

pages/index/index.wxml

`<navigator>` 标签方式:

pages/index/index.wxml

js api 方式:

pages/index/index.js

wx.switchTab({
   url:'/pages/cart/index'
})

1.3redirect

使用 redirect 跳转页面,它替换掉上一次路由记录,所以不会新增一次历史记录。类似于 vue 中的 router.replace('页面地址')

操作:新建 router 页面。从 首页 => 日志页面(使用redirect跳转到路由页面) => 路由页面

<navigator> 标签方式:

pages/logs/logs.wxml

<navigator open-type="redirect" url="/pages/router/index">去路由页面</navigator>

js api 方式:

pages/logs/logs.js

wx.redirectTo({
  url:'/pages/router/index'
})

1.4reLaunch

使用reLaunch 跳转页面,它会把之前的路由记录全部干掉。

从 首页 => 日志页面 => 路由页面(使用reLaunch跳转到日志页) => 日志页面

`<navigator>` 标签方式:

pages/router/index.wxml

js api 方式:

pages/router/index.js

1.5 wx.navigateBack

wx.navigateBack 返回页面,参数 delta 可以指定返回前几个页面。类似于 vue 中的 router.go(负数)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/457461.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件工程开发文档写作教程(04)—开发文档的编制策略

本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;电子工业出版社《软件文档写作教程》 马平&#xff0c;黄冬梅编著 开发文档编制策略 文档策略是由上级(资深)管理者制订的&#xff0c;对下级开发单位或开发人…

银河麒麟 Server V10 离线源建立+部署

前言 这国产操作系统真神奇&#xff0c;docker CentOS7&#xff0c; MySQL CentOS8 简直了&#xff0c;这缝合技术真是绝了&#xff01; docker CentOS7 能装最新版 23 很顺利的&#xff01; MySQL CentOS8 也是最新版8.0.33的&#xff0c;也很顺利&#xff01; 系统版本 …

权威解析,软件测试的当下分析现状

Parasoft是一家专门提供软件测试解决方案的公司&#xff0c;Parasoft通过其经过市场验证的自动化软件测试工具集成套件&#xff0c;帮助企业持续交付高质量的软件。Parasoft的技术支持嵌入式、企业和物联网市场&#xff0c;通过将静态代码分析和单元测试、Web UI和API测试等所有…

详解树与二叉树的概念,结构,及实现(下篇)

目录 一&#xff0c; 二叉树链式实现 1. 前置说明 2. 二叉树遍历&#xff08;主打的就是一个分治思想&#xff09; 2. 1 前序遍历 2. 2 中序遍历 2. 3 后序遍历 2. 4 层序遍历 3. 二叉树结点个数及高度 3. 1 二叉树节点个数 3. 2 二叉树叶子节点个数 3. 3 二叉树第…

数字信号处理技术(三)自适应噪声完备集合经验模态分解(CEEMDAN)-Python代码

本文仅对自适应噪声完备集合经验模态分解&#xff08;CEEMDAN&#xff09;的原理简单介绍和重点介绍模型的应用。 1. CEEMDAN原理 CEEMDAN&#xff08;Complete Ensemble Empirical Mode Decomposition with Adaptive Noise&#xff09;的中文名称是自适应噪声完备集合经验模…

一文全解经典机器学习算法之支持向量机SVM(关键词:SVM,对偶、间隔、支持向量、核函数、特征空间、分类)

文章目录 一&#xff1a;概述二&#xff1a;间隔与支持向量三&#xff1a;对偶问题&#xff08;1&#xff09;什么是对偶问题&#xff08;2&#xff09;SVM对偶问题&#xff08;3&#xff09;SMO算法 四&#xff1a;核函数&#xff08;1&#xff09;核函数的概述和作用&#xf…

车载应用生态:小程序容器技术成为保障安全的有力措施

随着智能交通和车联网技术的快速发展&#xff0c;越来越多的车载应用程序&#xff08;APP&#xff09;进入人们的视野&#xff0c;从而推动了车载业务生态的不断发展。然而&#xff0c;车载应用程序的安全问题也引起了人们的广泛关注。为此&#xff0c;小程序容器技术作为一种有…

4.24每日一练

题目 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcod…

毕业设计 医学图像阅读器 DICOM CT MRI 阅读器 三维重建 可视化编程技术及应用

一、 概述 此系统实现了常见 VTK 四视图&#xff0c;实现了很好的 DICOM 图像显示&#xff0c;可用于 DICOM 超声 X线 CT MR 三维重建 拾取像素值 窗宽 窗位 像素&#xff0c;距离测量&#xff0c;角度测量&#xff0c;提供源码&#xff1b; 并且通过三维重建实现可视化。使用…

客快物流大数据项目(一百一十七):网关 Spring Cloud Gateway

文章目录 网关 Spring Cloud Gateway 一、简介 1、功能特性

OSCP-Exfiltrated(Subrion、exiftool提权)

目录 扫描 WEB 提权 其他方法 扫描 WEB 添加 host信息 访问了该网站,并立即注意到该网站上制作的CMS(Subrion CMS)。

机器学习笔记之密度聚类——DBSCAN方法

机器学习笔记之密度聚类——DBSCAN方法 引言基本思想概念介绍算法过程完整算法描述 DBSCAN \text{DBSCAN} DBSCAN的优点和缺陷 引言 本节将介绍密度聚类—— DBSCAN \text{DBSCAN} DBSCAN方法。 对于其他聚类任务的笔记&#xff1a; K-Means \text{K-Means} K-Means聚类算法&…

PXE高效批量网络装机

PXE 定义 PXE(预启动执行环境&#xff0c;在操作系统之前运行)是由Intel公司开发的网络引导技术&#xff0c;工作在client /server模式&#xff0c;允许客户机通过网络从远程服务器下载引导镜像&#xff0c;并加载安装文件或者整个操作系统。 具备以下三个优点 1 规模化: 同时…

高通 Android 12 framework添加自定义按键上报应用层

Android下添加新的自定义键值和按键处理流程 首先分析下Android下怎么添加新的自定义键值。在Android的原生系统中键值默认情况下是92个&#xff0c;从0-91&#xff1b;一般情况下&#xff0c;这些键值是够用的&#xff0c;但是如果想扩充的话&#xff0c;还是需要添加新的键值…

Linux系统应用编程(五)Linux网络编程(上篇)

本篇主要内容&#xff1a; Linux系统应用编程&#xff08;五&#xff09;Linux网络编程&#xff08;上篇&#xff09;一、网络基础1.两个网络模型和常见协议&#xff08;1&#xff09;OSI七层模型&#xff08;物数网传会表应&#xff09;&#xff08;2&#xff09;TCP/IP四层模…

详解C语言string.h中常用的14个库函数(一)

我计划讲解C语言string.h这个头文件中&#xff0c;最常用的14个库函数。为了让大家更加深入的理解这些函数&#xff0c;部分函数我会模拟实现。篇幅所限&#xff0c;如果文章太长了&#xff0c;可能会较难坚持读完&#xff0c;所以我会分几篇博客来讲述。本篇博客主要讲解的函数…

FPGA时序约束(三)时序约束基本路径的深入分析

系列文章目录 FPGA时序约束&#xff08;一&#xff09;基本概念入门及简单语法 FPGA时序约束&#xff08;二&#xff09;利用Quartus18对Altera进行时序约束 文章目录 系列文章目录前言基本时序路径时钟偏差寄存器到寄存器&#xff08;reg2reg&#xff09;建立时间余量保持时…

PHP实现以数组var_dump,array_combine等函数的方法功能举例

目录 前言 一、什么是数组 二、把两个数组合并成一个数组 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 三、自动创建数组的一个案例 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 前言 1.若有选择&#xff0c;可实现在目录里…

小朋友排队

[蓝桥杯 2014 省 B] 小朋友排队 题目描述 n n n 个小朋友站成一排。现在要把他们按身高从低到高的顺序排列&#xff0c;但是每次只能交换位置相邻的两个小朋友。 每个小朋友都有一个不高兴的程度。开始的时候&#xff0c;所有小朋友的不高兴程度都是 0 0 0。 如果某个小朋友…

Python 学习曲线 从 Python 新手到 Pro

Python 学习曲线 从 Python新手到 Pro 使用代码片段介绍&#xff1a; Python 是世界上最通用和使用最广泛的编程语言之一&#xff0c;以其简单性、可读性和多功能性而闻名。 在本文中&#xff0c;我们将探讨一系列示例场景&#xff0c;其中代码由具有三个不同专业知识水平的程序…