如何不重新加载页面修改地址栏中的完整URL？

解决方案 #

history.pushState本身完全支持修改同域下的完整路径，你遇到的问题大概率是路径格式不规范导致的，按以下方式调整即可：

最优写法（推荐）

直接使用根路径开头的相对地址，浏览器会自动拼接当前域名和协议，避免出现跨域/协议不匹配的错误：

// 不需要填写完整域名，直接写目标路径即可
history.pushState({ Url: "/task/5" }, "", "/task/5");

必须填写完整URL的写法

如果场景要求必须传入完整URL，要确保和当前页面的协议、域名、端口完全一致，建议用URL构造器生成避免格式错误：

const targetUrl = new URL("/task/5", window.location.origin).href;
history.pushState({ Url: targetUrl }, "", targetUrl);

注意事项 #

• 浏览器存在同源限制，不允许用pushState修改跨域URL，只要你的目标地址和当前页面同协议、同域名、同端口，就可以正常修改全路径，无需仅修改URL参数。
• pushState只会修改地址栏的URL展示，不会触发页面刷新，也不会自动加载目标路径的页面内容。如果需要展示/task/5对应的页面内容，需要你自行实现前端路由的匹配和渲染逻辑。
• 如果不需要保留原路径/dashboard/test的历史记录（即用户点击后退按钮不会回到原页面），可以把pushState替换为replaceState，直接覆盖当前历史记录条目：

history.replaceState({ Url: "/task/5" }, "", "/task/5");

内容的提问来源于stack exchange，提问作者John