uniapp h5地址前端重定向跳转

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

ps:只能在h5中使用

首先需要用到query-string

安装query-string

js 复制代码
npm install query-string --save
//or
yarn add query-string

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

router-map.js

js 复制代码
const routeMap = {
	"/home":{
		path:'/pages/home/index',
		isTab:true
	}
}
export default routeMap;

需要用到的js

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页面中使用

js 复制代码
import matchAndNavigate from "@/router-map/router-map";
onLaunch:function(){
	matchAndNavigate();
}
相关推荐
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长3 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅4 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1005 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔665 小时前
flutter实现web端实现效果
前端·flutter