网站改版 升级的目的是什么,衡水商城网站建设,国内金融行业网站开发,网站做微信支付宝支付宝简单说下功能#xff0c;就是在地址输入http://localhost:8080/home 会自行跳转到http://localhost:8080/pages/home/index#xff0c;如果有带参数的话也会携带上去。
ps#xff1a;只能在h5中使用
首先需要用到query-string 安装query-string
npm install query-string…简单说下功能就是在地址输入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();
}
