uni-app H5平台通过返回的路径进行跳转时，会拼接当前页面路径

uni-app H5平台通过返回的路径进行跳转时，会拼接当前页面路径

开发环境 版本号 项目创建方式
Windows 10 教育版 3.2.11 HBuilderX 
### 操作步骤：
.

### 预期结果：
可以通过返回路径跳转对于页面

### 实际结果：
无法跳转，路径会拼接当前页面路径，所有路由都是

### bug描述：
H5平台通过返回的路径进行跳转时回拼接当前页面路径

![a2393e4e7ba4cafe9b03ddeba26c105a](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211026/a2393e4e7ba4cafe9b03ddeba26c105a.png)
![a0fdd83b9a7e18b6d36e4975559a88ac](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211026/a0fdd83b9a7e18b6d36e4975559a88ac.png)

更多关于uni-app H5平台通过返回的路径进行跳转时，会拼接当前页面路径的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

用的相对路径吧

更多关于uni-app H5平台通过返回的路径进行跳转时，会拼接当前页面路径的实战教程也可以访问 https://www.itying.com/category-93-b0.html


对啊

但是他会拼接多余的一部分

回复 4***@qq.com: 相对路径就是相对当前页面

回复 DCloud_UNI_GSQ: 那有什么解决办法，这个路径是动态的，有的路径还在分包中

回复 4***@qq.com: 自己拼接成绝对路径即可

在 uni-app H5 平台中，使用相对路径进行路由跳转时，确实会基于当前页面路径进行拼接。这是 H5 平台路由机制的特性，与小程序等平台的行为不同。

问题分析： 当你在 H5 中使用 uni.navigateTo 或 uni.redirectTo 等方法，并传入相对路径（如 ./detail 或 detail）时，路由系统会将其解析为相对于当前页面 URL 的路径。例如，当前页面为 pages/index/index，跳转 ./detail 会实际请求 pages/index/detail，这通常不是预期的页面。

解决方案：

  1. 使用绝对路径：在跳转时使用以 / 开头的绝对路径，例如 /pages/detail/detail。这能确保跳转目标路径从项目根路径开始解析，避免拼接问题。

  2. 配置路由基础路径：在 manifest.json 的 H5 配置中设置 router.base 为 ./，这可以调整路由的基准路径，但可能影响其他路由行为，需谨慎使用。

  3. 检查页面路径配置：确保 pages.json 中注册的页面路径正确，且与跳转时使用的路径完全匹配。路径区分大小写，需保持一致。

示例代码：

// 错误：使用相对路径，可能导致拼接
uni.navigateTo({
    url: './detail'
});

// 正确：使用绝对路径
uni.navigateTo({
    url: '/pages/detail/detail'
});
回到顶部