多页应用history操作回退问题处理方式

referrer获取上一页路径（处于同域名下）;首次加载页面referrer为空

document.referrer

返回上一页，如果没有上一页返回首页

function back() {
    if (document.referrer) {
      window.history.go(-1);
    } else {
      window.location.href = "/";
    }
}

返回上一页并刷新页面（这里的返回用替换来实现，到上一页后，history中会记录两个相同的记录）；再返回还出现原来缓存页面。

window.location.replace(document.referrer)

用cookie做会话记录页面状态（进入下一个页面cookie会带入下一个页面）

设置cookie

document.cookie = 'page=/index.html'

获取cookie

document.cookie

pageshow 监听页面显示（可以用于window.history.go(-1)返回页面重新加载数据处理；visibilitychange 事件存在兼容性）

window.addEventListener("pageshow", function (event) {
    console.log("页面显示了");
});

Cookie 实现页面返回监听

引入 jquery.js、 js-cookie.js

<script src="./jquery.min.js"></script>
<script src="./js-cookie.js"></script>

实现 router.js

function createRouter(e) {
  (function () {})();

  // 跳转页面
  function go(url) {
    if (url) window.location.href = url;
  }

  // 替换当前页面
  function replace(url) {
    if (url) window.location.replace(url);
  }

  // 返回页面
  function back(refresh = false, data) {
    if (document.referrer) {
      if (refresh) setBackEvent(data);
      window.history.go(-1);
    } else {
      window.location.href = "/";
    }
  }

  // 返回页面重新加载
  function listenerBackReload() {
    getBackEvent(() => {
      window.location.reload();
    });
  }

  // 获取返回事件
  function getBackEvent(callback = () => {}) {
    let key = null; // 监听跳转的key, 不是所有浏览器都支持

    // 监听跳转
    const fun = () => {
      const data = Cookies.get("_backEvent");
      if (data != undefined) {
        callback({ key, data: !!data ? JSON.parse(data) : data });
        Cookies.remove("_backEvent");
      }
    };

    // 监听需要返回挂载事件的跳转
    $("a[data-back]").on("click", function (event) {
      key = $(this).data("back");
      event.preventDefault();
      // 执行跳转
      window.location.href = $(this).attr("href");
    });

    // 页面显示
    window.addEventListener("pageshow", function (event) {
      fun();
    });
  }

  // 设置返回事件
  function setBackEvent(data) {
    Cookies.set("_backEvent", !!data ? JSON.stringify(data) : "{}");
  }

  /**
   * 刷新记忆
   * @param {boolean} long 长时间记忆 （默认不开启）
   * @returns
   */
  function refreshMemory(long = false) {
    value = Cookies.get("_refreshMemory") != undefined;
    if (value && long == false) Cookies.remove("_refreshMemory");
    return {
      value,
      start: (callback) => {
        Cookies.set("_refreshMemory", 1);
        if (typeof callback == "function") callback();
        else window.location.reload();
      },
    };
  }

  // 挂载路由
  e.router = {
    go,
    replace,
    back,
    listenerBackReload,
    getBackEvent,
    refreshMemory,
  };
}

list.html 列表页

<script src="./jquery.min.js"></script>
<script src="./js-cookie.js"></script>
<script src="./router.js"></script>

<a data-back="detail" href="/detail.html">跳转详情页</a>
<script>
	createRouter(window);
	
	// 开启返回监听
    router.getBackEvent((data) => {
        console.log('getBackEvent', data);
        window.location.reload();
    });
</script>

/detail.html 详情页

<script src="./jquery.min.js"></script>
<script src="./js-cookie.js"></script>
<script src="./router.js"></script>

<span onclick="goBack()"></span>
<a  data-back="edit" href="/edit.html">跳转编辑页</a>

<script>
	createRouter(window);

	// 记忆被刷新过（一般用于继续返回上一页时，是否再刷新）
    const refresh = router.refreshMemory();
	// 开启返回监听
    router.getBackEvent((data) => {
        console.log('getBackEvent', data);
        // 刷新
        refresh.start()
    });
    // 继续返回
    function goBack(){
        router.back(refresh.value);
    }
</script>

edit.html

<script src="./jquery.min.js"></script>
<script src="./js-cookie.js"></script>
<script src="./router.js"></script>

<span onclick="router.back(true, {id:123})">返回</span>

<script>
	createRouter(window);
</script>

注意：$(“a[data-back]”).on(“click”, function (event) {}) 后才会触发返回页面监听，所有记得标签 “a” 添加 data-back 属性，值用于回调数据