页面跳转以及刷新常用实现方式

前端页面经常会遇到路由跳转或者多页应用的页面跳转和刷新，我们把页面跳转和刷新的方式大体分为两种

第一种 HTML 实现页面跳转刷新

这种方式因为早前 IE6 的不支持导致并没有广泛的使用。对于逻辑并不复杂的页面刷新或跳转不妨使用这个试试。

<meta http-equiv="refresh" content="5" /> // 5秒后刷新本页面

<meta http-equiv="refresh" content="2; url='/'">
// 2秒后到页面根目录

<meta http-equiv="refresh" content="0; url='http://www.qq.com/'" /> //
跳转到url后的地址

js 实现跳转又可以分为两种

history.back() // 等同于点击浏览器的回退按钮
history.go(-1) //等同于history.back();
history.go(1) //等同于浏览器的前进按钮

window.location.href = "https://baidu.com" // 跳转到指定地址--会在历史堆栈中留下记录
window.location.replace("https://baidu.com") // 将当前页面地址替换为指定地址--不会产生新的记录

302 这个状态码想必大家都比较熟悉了，特别是对于授权的请求，都会由服务端进行 302 重定向到我们的回调地址中。不过 302 的重定向一般用于我们的资源地址在服务器上发生了变化，这时服务端会把我们重定向到变化后的地址，以便我们能够正确访问。

问题为何跳转后不刷新？

目前很多浏览器都会由页面缓存，一方面是为了提升页面的相应速度，另一方面也减少对网络的压力。随意而来的一些问题就是我们想要刷新页面的时候经常没办法刷新，因为浏览器不知道我们什么时候要刷新，如何解决呢？

self.location = document.referrer

document.referrer

这个主要是获取前一个访问页面的 URL 地址。

关于 document.referrer 的应用，除了上面的返回上一页，还有一个用途。用来做返回的跳转

例如返回上一页的代码如下：

<a href="javascript:history.back()" class="goback"></a>

上面代码大部分是可以用的，但是有时候是不可以。微信分享进来直接是内页，没有上一页的情况，这个没有办法返回，点击是无效的！

针对这种情况，我们可以如下代码：

if (document.referrer === "") {
  // 没有来源页面信息的时候，改成首页URL地址
  $(".goback").attr("href", "/")
}

当没有来源的时候，返回改成首页。