location 属性包含了页面的 URL 相关信息。

4-1.属性

属性名	含义
protocol	协议
hostname	域名
port	端口号
pathname	路径
search	?及其后面的字符串拼接
hash	#及其后面的字符串拼接
href	protocol+hostname+port+pathname+search+hash
host	hostname+port
origin	protocol+hostname+port (协议、域名、端口号)

4-2.方法

4-2-1.reload

reload 方法可用于网页重新加载。

相当于刷新页面。外部请求会重新发起，所有资源会重新加载。

window.location.reload()

4-2-2.assign

assign 方法可用于将重定向或导航至另一 URL。

另外该方法会将页面保留在路由记录中，即能够通过浏览器的 后退 按钮返回。

在效果上类似于 vue-router 中的 $router.push()。

<button id="assign">assign</button>

<script>
  window.addEventListener('load', function () {
    var assign = document.querySelector('#assign')
    assign.addEventListener('click', function () {
      window.location.assign('https://github.com/Code1994')
    })
  })
</script>

4-2-3.replace

与 assign 相同的是，replace 方法也用于将重定向或导航至另一 URL。

但该方法会将页面保留在路由记录中，即不能够通过浏览器的 后退 按钮返回。

在效果上类似于 vue-router 中的 $router.replace()。