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

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();
}

相关文章:

uniapp h5地址前端重定向跳转

简单说下功能&#xff0c;就是在地址输入http://localhost:8080/home 会自行跳转到http://localhost:8080/pages/home/index&#xff0c;如果有带参数的话也会携带上去。 ps&#xff1a;只能在h5中使用 首先需要用到query-string 安装query-string npm install query-string…...

uniapp隐藏自带的tabBar

uniapp隐藏自带的tabBar 场景: 微信小程序在使用自定义tabBar组件时, 隐藏uniapp自带的tabBar <template> <!-- index页面 --> </template> <script setup> import { onShow } from /utils/wxUtils onShow(() > {uni.hideTabBar() // 隐藏自带的tab…...

使用--log-file保存pytest的运行日志

前面使用了tee和重定向来保存pytest的运行日志&#xff0c;这次使用--log-file&#xff0c;因为它可以配置日志的级别、格式和每行日志的生成时间。 pytest -q -s -ra --count100 test_open_stream.py --alluredir./report/CXL --log-filepytest_log.txt 【pytest.ini】 使用…...

WebAPI性能监控-MiniProfiler与Swagger集成

Net8_WebAPI性能监控-MiniProfiler与Swagger集成 要在.NET Core项目中集成MiniProfiler和Swagger&#xff0c;可以按照以下步骤操作&#xff1a; 安装NuGet包&#xff1a; 安装MiniProfiler.AspNetCore.Mvc包以集成MiniProfiler。安装MiniProfiler.EntityFrameworkCore包以监…...

视频会议接入GB28181视频指挥调度,语音对讲方案

传统的视频会议指挥调度系统目前主流的互联网会议大部分都是私有协议&#xff0c;功能都很独立。目前主流的视频监控国标都最GB平台&#xff0c;新的需求要求融合平台要接入监控等设备&#xff0c;并能实现观看监控接入会议&#xff0c;实时语音设备指挥现场工作人员办公实施。…...

深度学习和图像处理

看来你对深度学习和图像处理很感兴趣呢&#xff0c;让我来一一解答你的疑惑吧。 深度学习高纬度特征 首先&#xff0c;我猜你是想问“深度学习中的高维特征”吧。在深度学习中&#xff0c;随着网络层数的加深&#xff0c;网络的感受野逐渐变大&#xff0c;语义表达能力也随之增…...

〔 MySQL 〕数据类型

目录 1.数据类型分类 2 数值类型 2.1 tinyint类型 2.2 bit类型 2.3 小数类型 2.3.1 float 2.3.2 decimal 3 字符串类型 3.1 char 3.2 varchar 3.3 char和varchar比较 4 日期和时间类型 5 enum和set mysql表中建立属性列&#xff1a; 列名称&#xff0c;类型在后 n…...

云安全之云计算基础

0x00 前言 本文主要是针对云计算相关的基础梳理和整理。 云计算 NIST 800-145ISO/IEC 17788ISO/IEC 17789云安全 NIST 500-299 云安全ISO / IEC FDIS 27017 云安全0x01 云计算基础 什么是云计算: 一种新的运作模式和一组用于管理计算资源共享池的技术。云计算是一种颠覆性的…...

PostgreSQL pg-xact(clog)目录文件缺失处理

一、 背景 前些天晚上突然收到业务反馈&#xff0c;查询DB中的一个表报错 Could not open file "pg-xact/005E": No such file or directory. 两眼一黑难道是文件损坏了...登录查看DB日志&#xff0c;还好没有其他报错&#xff0c;业务也反馈只有这一个表在从库查询报…...

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时&#xff0c;遇到命名时的实心与空心点差异&#xff01; ElementUI&#xff1a; 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus&#xff1a; 实心是 el-icon-more-fill…...

基于碎纸片的拼接复原算法及MATLAB实现

一、问题描述 破碎文件的拼接在司法物证复原、历史文献修复以及军事情报获取等领域都有着重要的应用。传统上&#xff0c;拼接复原工作需由人工完成&#xff0c;准确率较高&#xff0c;但效率很低。特别是当碎片数量巨大&#xff0c;人工拼接很难在短时间内完成任务。随着计算…...

苍穹外卖 软件开发流程

软件开发的流程&#xff1a; 1.需求分析 完成需求规格说明书、产品原型。 需求规格说明书&#xff1a;一般而言是word文档描述当前项目的各个组成部分&#xff0c;如&#xff1a;系统定义、应用环境、功能规格、性能需求等&#xff0c;都会在文档中描述。 …...

mysqldump导出表结构和表数据和存储过程和函数

0、查看表结构信息 (1) 只查看表结构的注释信息 select table_name,table_comment from information_schema.tables where table_schema 表所在的库 and table_name 表名 &#xff1b; mysql> select table_name,table_comment from information_schema.tables where tabl…...

常见的排序算法及分类对比

虽然在竞赛和编程语言中用到的排序算法主要是时间复杂度为 O ( n log ⁡ n ) O(n \log n) O(nlogn) 的高效算法,但作为算法学习,我们要从简单到复杂,认识常见的排序算法,并理解其算法思想。本文列出几乎所有的排序算法并进行分类对比。 排序算法总表 以下是一个对比表格…...

多窗口切换——selenium

获取窗口句柄&#xff08;以Python Selenium为例&#xff09; current_window_handle方法 用于获取当前窗口的句柄。句柄是一个标识符&#xff0c;用于唯一标识一个窗口。示例代码&#xff1a; from selenium import webdriverdriver webdriver.Chrome() driver.get("…...

LFD STM32编程规范20241111

1. 源文件和头文件放同一目录bsp文件夹顺序文件注释防重复设置#include#defineenum类型声明、定义 包括struct union typedef全局变量声明文件级变量声明全局或文件级函数声明函数实现。按函数声明顺序文件尾注释。/**************END FILE**************/引用头文件不用绝对路…...

Python学习------第八天

函数 函数的传入参数 掌握函数返回值的作用 掌握函数返回值的定义语法 函数的嵌套调用&#xff1a; 函数的局部变量和全局变量 局部变量的作用&#xff1a;在函数体内部&#xff0c;临时保存数据&#xff0c;即当函数调用完成后&#xff0c;则销毁局部变量。 money 5000000 n…...

【扩散——BFS】

题目 代码 #include <bits/stdc.h> using namespace std; const int t 2020, off 2020; #define x first #define y second typedef pair<int, int> PII; int dx[] {0, 0, 1, -1}, dy[] {-1, 1, 0, 0}; int dist[6080][6080]; // 0映射到2020&#xff0c;2020…...

C++ 编程基础(5)类与对象 | 5.5、多态

文章目录 一、多态1、概念2、多态实现方式3、动态绑定与静态绑定4、虚函数4.1、声明与定义4.2、虚函数的工作原理4.3、虚函数的优点与注意事项 5、不能声明为虚函数的函数6、纯虚函数7、抽象类8、总结 前言&#xff1a; 在C编程语言中&#xff0c;多态性&#xff08;Polymorphi…...

客户端发送http请求进行流量控制

客户端发送http请求进行流量控制 实现方式 1&#xff1a;使用 Semaphore (信号量) 控制流量 asyncio.Semaphore 是一种简单的流控方法&#xff0c;可以用来限制并发请求数量。 import asyncio import aiohttp import timeclass HttpClientWithSemaphore:def __init__(self, …...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...