简单说下功能,就是在地址输入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();
}