ES6页面重定向

在Web开发中，页面重定向是常见的操作之一。ES6引入了新的API来处理页面重定向。

1. Location API

Location对象表示当前URL的各个部分，可以通过window.location属性获取。Location对象有很多属性和方法，其中最常用的就是assign()方法和replace()方法来实现页面重定向。

1.1 assign()方法

assign()方法用于将当前页面重定向到新的URL，并将新的URL添加到浏览器的历史记录中，可以通过浏览器的"后退"按钮返回到前一个页面。

window.location.assign('https://www.baidu.com')

1.2 replace()方法

replace()方法用于将当前页面重定向到新的URL，并用新的URL替换浏览器的历史记录中的当前页面，所以无法通过浏览器的"后退"按钮返回到前一个页面。

window.location.replace('https://www.baidu.com')

2. History API

History对象表示浏览器的历史记录，可以通过window.history属性获取。ES6引入了新的API来处理历史记录，包括pushState()方法、replaceState()方法和popState事件。

2.1 pushState()方法

pushState()方法用于向浏览器添加新的历史记录，并将当前页面重定向到新的URL，但不会立即加载新页面，需要手动触发popState事件。

window.history.pushState({}, 'title', 'https://www.baidu.com')

2.2 replaceState()方法

replaceState()方法用于替换当前的历史记录，可以将当前页面重定向到新的URL，但不会立即加载新页面，需要手动触发popState事件。

window.history.replaceState({}, 'title', 'https://www.baidu.com')

2.3 popState事件

当浏览器的历史记录发生变化时，会触发popState事件。可以通过监听该事件来处理页面重定向。

window.addEventListener('popstate', function() {
  console.log('history state changed')
})

3. 总结

通过使用ES6的Location API和History API，可以实现更加灵活和可靠的页面重定向操作。对于不同的场景，可以选择不同的方法来实现页面重定向，比如需要保留历史记录时使用assign()方法，需要替换当前历史记录时使用replace()方法，需要手动触发popState事件时使用pushState()或replaceState()方法。