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