uniapp h5地址前端重定向跳转

简单说下功能,就是在地址输入http://localhost:8080/home 会自行跳转到http://localhost:8080/pages/home/index,如果有带参数的话也会携带上去。

ps:只能在h5中使用

首先需要用到query-string
安装query-string

npm install query-string --save
//or
yarn add query-string

创建一个路由映射的js集合(自行命名)
router-map.js

const routeMap = {"/home":{path:'/pages/home/index',isTab:true}
}
export default routeMap;

需要用到的js

import routeMap from "./router-map";
import queryString from 'query-string';// 解析当前URL,返回路径和查询字符串
function getCurrentUrl() {const url = window.location.pathname + window.location.search;let [path, searchString = ""] = url.split("?");return { path, searchString };
}// 构建完整的URL
function buildUrl(pagePath, queryString) {return queryString ? `${pagePath}?${queryString}` : pagePath;
}// 匹配当前URL并导航
async function matchAndNavigate() {const { path, searchString } = getCurrentUrl();let routeInfo = routeMap[path]; // 尝试直接匹配静态路由var query = queryString.parse(searchString)// 检查是否有动态路由匹配if (!routeInfo) {Object.keys(routeMap).forEach((pattern) => {if (pattern.includes(":")) {const regex = new RegExp(`^${pattern.replace(/:([^\s/]+)/g, "(?<$1>[\\w-_]+)")}$`);const match = path.match(regex);if (match) {// 正确复制路由信息并替换动态部分routeInfo = { ...routeMap[pattern] }; // 复制对象,避免修改原始映射routeInfo.path = routeInfo.path.replace(/:[^\s/]+/,match[1]);if (match.groups) {query = { ...match.groups, ...query }}}}});}// 执行跳转if (routeInfo && routeInfo.path) {const finalUrl = buildUrl(routeInfo.path, queryString.stringify(query));await uni.preloadPage({ url: finalUrl });if (routeInfo.isTab) {uni.switchTab({url: finalUrl,});} else {uni.redirectTo({url: finalUrl,});}} else {// 适当的错误处理或默认处理}
}export default matchAndNavigate;

在app.vue页面中使用

import matchAndNavigate from "@/router-map/router-map";
onLaunch:function(){matchAndNavigate();
}

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

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

相关文章

Jmeter中的后置处理器(三)

9--XPath2 Extractor 功能特点 数据提取&#xff1a;使用 XPath2 表达式从 XML 响应中提取特定的数据。动态参数传递&#xff1a;将提取的数据存储为变量&#xff0c;供后续请求使用。支持丰富的表达式&#xff1a;支持复杂的 XPath2 表表达式&#xff0c;提供丰富的数据提取…

【MySQL-1】MySQL数据库的基本操作

目录 1. 整体学习思维导图 2. 数据库的创建 2.1 创建一个数据库 2.2 创建一个指定字符集和校验规则的数据库 3. 字符集和校验规则 3.1 查看系统默认字符集以及校验规则 3.2 查看数据库所支持的字符集和校验规则 3.3 不同校验规则所带来的影响 4. 操作数据库 4.1查…

React Native 全栈开发实战班 - 图片加载与优化

在移动应用中&#xff0c;图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 React Native 中常用的图片加载方法&#xff0c;包括 Image 组件的使用、第三方图片加载库&#xff08;如 react-native-fast…

UE5遇到问题记录—在sequence制作时如何让角色隐藏/显示?

遇到问题&#xff1a; 在sequence制作时如何让角色隐藏/显示&#xff1f; 解决办法&#xff1a; 在角色通道添加轨道&#xff1a;actor hide in game即可&#xff0c;添加后有可视性&#xff0c;打勾或者取消来控制角色的可见性。

文献阅读11.17

扩散波模型的物理信息神经网络 文献摘要 扩散波模型(DWM)是浅水方程的非线性二阶简化形式&#xff0c;利用DWM正问题的解可以预测水位和流量的变化。求解其逆问题可以根据观测结果确定关键参数(如曼宁系数、降雨强度等)。文章将改进后的PINN应用于DWM的正解和逆解。在正演问题…

【网络安全 | 漏洞挖掘】在重置密码流程利用请求头实现ATO

未经许可,不得转载。 文章目录 HTTP Host头漏洞发现漏洞利用漏洞影响HTTP Host头 HTTP Host头是HTTP/1.1中一个强制性的请求头,它指定了用户要访问的域名。 例如,如果用户访问 https://example.com,浏览器会发出如下带有Host头的请求: GET / HTTP/1.1 Host: example.co…

计算机网络中的数据包传输机制详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 引言 数据包的基本概念…

Android AOSP 架构和各层次开发内容介绍

一、系统架构总况​​​​ 官方文档&#xff1a;架构概览 | Android Open Source Project (google.cn)https://source.android.google.cn/docs/core/architecture?hlzh-cn 下面是Google Android 提供的最新架构层次图&#xff1a; 图. AOSP 的软件堆栈层次 System API 表示…

shell编程--永久环境变量和字符串显位

环境变量 echo $HOME 在终端输出后会显示家目录有个root变量 我们会提出个疑问为什么平时我们在终端输入sl 或者which等等命令会输出一些内容呢&#xff0c;这是因为这些命令都有对应的环境变量。 我们查看一下环境变量 在终端输入&#xff1a; echo $PATH 我们看一下输出…

【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题

【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题 零、问题 使用QT编译好项目后&#xff0c;想直接在文件资源管理器中运行exe程序或想分享出去给别人使用发现出现如下问题&#xff1a; 系统错误&#xff1a;找不到xxx.dll。 无法找到入口&#x…

【网络】什么是路由器 (Router )网关设备(Gateway)?

路由器&#xff08;Router&#xff09;&#xff0c;又称路径器或网关设备&#xff08;Gateway&#xff09;&#xff0c;是一种重要的计算机网络设备。以下是关于路由器的详细解释&#xff1a; 一、路由器的定义与功能 定义&#xff1a;路由器是连接因特网中各局域网、广域网的…

GitLab 降级安装出现 500 错误,如何解决?

本文分享 GitLab 中文版在降级的过程中出现 500 错误的修复方法。 写在前面 强烈不建议大家自行降级&#xff0c;如果真有降级需求&#xff0c;要么自己能力过硬&#xff0c;要么寻求专业服务【https://dl.gitlab.cn/cm33bsfv】&#xff0c;要不出问题很麻烦&#xff01; 问…

TensorFlow 2.0 windows11 GPU 训练环境配置

前言 在一切开始之前&#xff0c;请确保你的cmd命令行和powershell命令行可以正常打开。如果不能&#xff0c;建议重装系统。我不确定这是否会影响你最终的结果&#xff0c;毕竟windows的坑太多了。 安装顺序&#xff1a;visual studio -> cuda -> cudnn -> python…

23种设计模式-观察者(Observer)设计模式

文章目录 一.什么是观察者模式&#xff1f;二.观察者模式的结构三.观察者模式的应用场景四.观察者模式的优缺点五.观察者模式的实现&#xff08;C示例&#xff09;六.观察者模式的实现&#xff08;JAVA示例&#xff09;七.代码解释八.总结 类图&#xff1a; 观察者设计模式类图…

使用dataGrip连接spark

概述&#xff1a; spark的配置共有5种 1、本地模式 2、集群模式&#xff1a;standalone&#xff0c; yarn&#xff0c;k8s&#xff0c;mesos四种集群模式 spark本身只是一个计算引擎&#xff0c;是没有数据库的&#xff0c;所以说数据需要在hdfs上存放&#xff0c;而数据库就…

前馈神经网络 (Feedforward Neural Network, FNN)

代码功能 网络定义&#xff1a; 使用 torch.nn 构建了一个简单的前馈神经网络。 隐藏层使用 ReLU 激活函数&#xff0c;输出层使用 Sigmoid 函数&#xff08;适用于二分类问题&#xff09;。 数据生成&#xff1a; 使用经典的 XOR 问题作为数据集。 数据点为二维输入&#xff…

《操作系统 - 清华大学》3 -3:连续内存分配:内存碎片与分区的动态分配

文章目录 0. 概述1. 内存碎片问题2. 动态分配3. 首次适配算法4. 最优适配算法5. 最差适配算法 0. 概述 内存分配是操作系统管理过程中很重要的环节&#xff0c;首先需要考虑的是一块连续区域分配的过程&#xff0c;这个过程中会有很多问题&#xff0c;首先比较关注的一个问题是…

[Mysql基础]表的查询

一、表的增删改查 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; 1.1 插入否则更新 由于 主键 或者 唯一键 对应的值已经存在而导致插入失败 -- 创建一张学生表 CREATE TABLE students (id INT UNSIGNED PR…

Py之pymupdf:基于langchain框架结合pymupdf库实现输出每个PDF页面的文本内容、元数据等

Py之pymupdf:基于langchain框架结合pymupdf库实现输出每个PDF页面的文本内容、元数据等 目录 PyMuPDFLoader类 初始化 属性 方法 __init__(file_path, *, headers=None, extract_images=False, **kwargs) lazy_load() aload() alazy_load() load(**kwargs) load_and…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…