在前端开发中，可以通过修改浏览器的历史记录来实现修改当前URL链接但页面不跳转的功能。这通常使用HTML5的History API来完成。具体来说，可以使用history.pushState或history.replaceState方法。
以下是使用history.pushState的示例，它会在历史记录中添加一个新的状态，但不会刷新页面：
// 假设我们有一个按钮，当点击这个按钮时，我们希望修改URL但不跳转
document.getElementById('changeUrlButton').addEventListener('click', function() {
// 新的URL路径
var newUrlPath = '/new-path';
// URL的标题（目前大多数浏览器都不使用这个参数）
var newUrlTitle = '';
// 与新URL相关的状态对象（可以是任何对象，用于后续可能的状态恢复）
var newStateObject = { page: 1 };
// 使用 history.pushState 修改URL
history.pushState(newStateObject, newUrlTitle, newUrlPath);
// 可选：修改页面内容，以匹配新的URL（例如，通过AJAX加载新内容）
// document.getElementById('content').innerHTML = '这是新的内容';
});
// 处理 popstate 事件，当用户点击浏览器的后退或前进按钮时触发
window.addEventListener('popstate', function(event) {
// event.state 包含传递给 pushState 或 replaceState 的状态对象
console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
// 根据 event.state 更新页面内容
// 例如：
// if (event.state && event.state.page) {
// document.getElementById('content').innerHTML = '这是第 ' + event.state.page + ' 页的内容';
// }
});
在这个示例中，我们假设有一个按钮，当点击这个按钮时，它会修改当前的URL路径为/new-path，但不会刷新页面。
注意事项
- 浏览器支持：大多数现代浏览器都支持History API，但在某些旧版浏览器中可能不支持。
- 服务器端路由：确保服务器能够处理新的URL路径，如果用户直接访问新的URL或刷新页面，服务器应该能够返回正确的响应。
- 状态管理：
pushState和replaceState允许你传递一个状态对象，这个对象可以在popstate事件中被访问，因此可以用来恢复页面的状态。
使用history.replaceState
如果你不想在历史记录中留下当前页面的记录，可以使用history.replaceState，它会替换当前的历史记录而不是添加一个新的记录：
document.getElementById('changeUrlButton').addEventListener('click', function() {
var newUrlPath = '/new-path';
var newUrlTitle = '';
var newStateObject = { page: 1 };
history.replaceState(newStateObject, newUrlTitle, newUrlPath);
});
使用replaceState时，用户无法通过浏览器的后退按钮回到之前的状态，因为当前的状态已经被新的状态替换了。