解释 ES6 中的页面重定向

在 ES6 中，我们可以使用 location.assign() 方法和 location.href 属性来进行页面重定向。

使用 location.assign() 方法

使用 location.assign() 方法可以在当前窗口或标签页打开一个新的 URL，代替当前页面内容。该方法接受一个 URL 字符串作为参数。

代码示例：

location.assign("https://www.example.com");

该代码将会在当前窗口或标签页中打开一个名为 https://www.example.com 的 URL。

使用 location.href 属性

使用 location.href 属性也可以在当前窗口或标签页打开一个新的 URL，代替当前页面内容。该属性的值是一个 URL 字符串。

代码示例：

location.href = "https://www.example.com";

该代码将会在当前窗口或标签页中打开一个名为 https://www.example.com 的 URL。

区别与联系

使用 location.assign() 方法和 location.href 属性都可以进行页面重定向，但是二者还是有一些区别的。

• location.assign() 方法可以返回到前一个页面，而 location.href 属性无法实现。
• location.assign() 方法接受一个字符串参数，而 location.href 属性需要直接赋值一个字符串。

情景应用

页面重定向在实际开发中非常常见，比如实现登录拦截、跳转到对应页面等。

假设我们现在有一个页面 index.html，当用户点击一个登录按钮时需要进行登录，并跳转到另一个页面 home.html。

代码示例：

<!-- index.html -->
<button id="loginBtn">登录</button>

// index.html
const loginBtn = document.getElementById("loginBtn");
loginBtn.addEventListener("click", () => {
  // 进行登录
  // ...
  location.assign("https://www.example.com/home.html");
});

点击登录按钮后，页面将会跳转到名为 https://www.example.com/home.html 的 URL。

总结

ES6 中提供了 location.assign() 方法和 location.href 属性来实现页面重定向，开发者可以根据实际情况选择使用哪种方式，注意使用的场景和注意事项。