- 使用正确的路由方式： 如果项目使用了前端框架（例如 Angular、React、Vue），应该使用框架提供的路由功能来进行页面跳转，而不是直接修改 location.href。在提供的代码中，leaderBoard() 函数使用了 this.router.navigateByUrl()，这是一种正确的做法。确保 this.router 对象已经正确初始化，并且路由配置正确。
function leaderBoard() {
this.router.navigateByUrl('/scores.html');
// 其他代码
board = document.getElementById("board")
if (scores.length < 1) {
board.innerHTML = "NO SCORES FOUND"
}
else {
for (i = 0; i < scores.length; i++) {
board.innerHTML += " player: " + scores[i][0] + " word: " + scores[i][0] + + "guesses: " + scores[i][2] + " mistakes: " + scores[i][3];
}
}
}避免在重定向后执行不必要的代码： 在 load() 函数中，重定向后仍然执行了大量的初始化代码。这些代码应该只在页面加载时执行一次，而不是每次重定向后都执行。可以将这些代码放在一个单独的函数中，并在页面加载时调用该函数。
考虑使用 history.pushState()： history.pushState() 允许在不刷新页面的情况下修改 URL。这可以提供更好的用户体验，并避免不必要的页面加载。
function load() {
history.pushState({}, '', '/index.html');
// 其他初始化代码
mistakes = 1;
guess = 0;
guessWord = [];
keyboard = document.getElementById("keyboard")
keyboard.innerHTML = "";
for (i = 0; i < letters.length; i++) {
keyboard.innerHTML += "";
}
num = Math.round(Math.random() * (words.length - 1))
word = words[num]
for (i = 0; i < word.length; i++) {
guessWord[i] = " ";
}
screen = document.getElementById("screen")
screen.innerHTML = "";
for (i = 0; i < word.length; i++) {
screen.innerHTML += " "
}
document.getElementById("tries").innerHTML = "guesses: " + guess + ", mistakes: " + (mistakes - 1);
}使用 pushState() 时，还需要监听 popstate 事件，以便在用户点击浏览器的前进/后退按钮时做出相应的处理。
window.addEventListener('popstate', function(event) {
// 根据 URL 执行相应的操作
console.log('URL changed:', location.pathname);
});注意事项
- 服务器端 URL 处理： 确保服务器端能够正确处理所有可能的 URL。如果使用了 history.pushState()，服务器需要能够返回正确的 HTML 文件，即使 URL 发生了变化。
- 调试： 使用浏览器的开发者工具可以帮助调试重定向问题。可以查看网络请求、控制台输出和 JavaScript 代码，以找出问题的根源。
总结
避免 window.location 无限循环的关键在于仔细检查重定向逻辑，并确保只在必要时执行重定向。使用前端框架提供的路由功能、避免在重定向后执行不必要的代码，以及考虑使用 history.pushState() 都是有效的解决方案。通过理解这些概念和技巧，可以避免常见的重定向问题，并提高 Web 应用的稳定性和用户体验。
