如何改变JavaScript中的URL。重定向

在这篇快速文章中，我们将讨论如何通过重定向来改变JavaScript中的URL。我们将通过几个不同的方法，你可以用来执行JavaScript重定向。

JavaScript是网络的核心技术之一。大多数网站都使用它，而且所有现代网络浏览器都支持它，不需要插件。在这个系列中，我们将讨论不同的提示和技巧，这些提示和技巧可能有助于你的日常JavaScript开发。

当你使用JavaScript工作时，你经常需要将用户重定向到不同的页面。JavaScript提供了不同的方法，你可以用这些方法来实现它。

今天，我们将讨论如何在vanilla JavaScript中和使用jQuery库来执行URL重定向。

如何在Vanilla JavaScript中改变URL

在本节中，我们将通过JavaScript提供的不同的内置方法来实现URL重定向。事实上，JavaScript提供了location 对象，这是窗口对象的一部分，它允许你执行不同的URL相关操作。

location.href 方法

location.href 方法是执行JavaScript重定向的最流行的方法之一。如果你试图获取location.href 的值，它会返回当前URL的值。同样，你也可以用它来设置一个新的URL，然后用户就会被重定向到该URL。

让我们来看看下面的例子。

console.log(location.href);
// prints the current URL

location.href = 'https://code.tutsplus.com';
// redirects the user to https://code.tutsplus.com
复制代码

正如你所看到的，用location.href 方法来重定向用户是相当容易的。由于location 对象是window 对象的一部分，上面的片段也可以写成。

window.location.href = 'https://code.tutsplus.com';
复制代码

因此，通过这种方式，你可以使用location.href 方法来改变URL，将用户重定向到不同的网页。

location.assign 方法

location.assign 方法的工作原理与location.href 方法非常相似，它允许你将用户重定向到一个不同的网页。

让我们通过下面的例子快速了解它是如何工作的。

location.assign('https://code.tutsplus.com');
复制代码

正如你所看到的，它是非常简单明了的。你只需要在assign 方法的第一个参数中传递URL，它就会把用户重定向到该URL。值得注意的是，assign 方法维护了History 对象的状态。我们将在下一节中详细讨论这个问题。

location.replace 方法

你也可以使用location.replace 方法来执行JavaScript重定向。location.replace 方法允许你用一个不同的URL替换当前的URL来执行重定向。

让我们通过下面的例子来看看它是如何工作的。

location.replace('https://code.tutsplus.com');
复制代码

虽然，location.replace 方法看起来与location.href 和location.assign 方法非常相似，可以将用户重定向到一个不同的URL，但它们之间有一个重要的区别。当你使用location.replace 方法时，当前页面不会被保存在会话中，它实际上被从JavaScriptHistory 对象中删除。因此，用户将无法使用后退按钮来导航到它。

让我们试着用下面的例子来理解它。

// let’s assume that a user is browsing https://code.tutsplus.com

// a user is redirected to a different page with the location.href method
location.href = 'https://design.tutsplus.com';

// a user is redirected to a different page with the location.replace method
location.replace('https://business.tutsplus.com');
复制代码

在上面的例子中，我们已经假设用户正在浏览https://code.tutsplus.com 网页。接下来，我们使用location.href 方法将用户重定向到https://design.tutsplus.com 网页。最后，我们使用location.replace 方法，将用户重定向到https://business.tutsplus.com 网页。现在，如果用户点击后退按钮，它将回到https://code.tutsplus.com ，而不是https://design.tutsplus.com ，因为我们已经使用了location.replace 方法，它实际上已经在History 对象中用https://business.tutsplus.com 替换了当前URL。

因此，在你使用location.replace 和其他方法之前，你应该了解它们之间的区别。你不能交替使用它们，因为location.replace 方法改变了JavaScriptHistory 对象的状态。因此，如果你想保留History 对象的状态，你应该选择其他方法来重定向用户。

如何用jQuery执行URL重定向

尽管vanilla JavaScript在URL重定向方面提供了足够多的选择，但如果你还在寻找如何用jQuery库来进行重定向，我们将在本节中快速浏览一下。

在jQuery中，你可以使用attr 方法来执行重定向，如下面的片段所示。

$(location).attr('href', 'https://design.tutsplus.com');
复制代码

正如你所看到的，用jQuery来重定向用户是相当容易的!

所以这就是你可以用来执行JavaScript重定向的不同方法。就这样，我们也达到了这篇快速文章的终点。

总结

今天，我们讨论了如何实现JavaScript重定向的问题。我们讨论了可以用来执行JavaScript重定向的不同方法，并举了一些例子。