如何获取是否还有上一个页面？（对返回按钮的判断）

Question

问题描述

直接通过url地址进入的页面需要取消返回按钮，如何判断当前页面是否为进入时的第一页？？

尝试过的方法

一、window.history
使用window.history.length来判断是否有上一级页面，在刚进入这个页面时是有效的，但是从下级页面返回时还是同样的出现，虽然返回当前页面但是window.history.length已经是2了。
第一次进入该页面没有出现返回按钮：

从下级页面返回之后还是会有返回：

二、document.referrer
我的项目是vue项目，所以document.referrer一直是空的，导致下级页面页没有返回按钮。

相关代码

if (window.history.length <= 1) {
    this.hasReturn = false;
}

Answer 1

前言

使用单页面的话 document.referrer 会一直为空(.html或者ssr网页则存在值)

History.length 表示用户历史会话页面的数量。当用户从新的标签页或框架载入页面其值为“1”，每访问一个页面该值增加“1”。
因为history.length 的数量只增不减，根本不能拿来做判断。

场景

需要判断用户从微信浏览器通过浏览器打开当前网页，如果是则当用户点击返回按钮时返回到web应用（站点）首页

• 或：判断是否有前一页

  • 通过history.length

    • 不准确，如果用户曾经打开过，则会存在更多的history.length
    • 如果用户不曾打开过且直接从微信浏览器再使用系统浏览器打开，则 history.length === 1 (其中手机浏览器中为1，chrome控制台为2)

• 或：判断用户是否访问过

  • 通过cookie或是sessionStorage
  • https://oldj.net/blog/2013/08...

• 或：判断 history 中是否存在指定url

  • 没有找到相关方法

• 或：判断是否是通过微信浏览器唤醒设备浏览器再打开到当前网页的

  • 没有找到相关方法

肯定还有其他方法实现 当用户点击返回按钮时返回到web应用（站点）首页 这个功能的，现在脑袋有点晕，如果有的话，也希望能得到分享，非常感谢。
对了，Vuex能否判断呢？实在是没有找到相关(内置)方法，或许有。不过即便没有的话也没关系，自己扩展一个就行。

Vue玩家还可参考:https://segmentfault.com/q/10...

还有

别忘记监听浏览器的返回事件啦 ：

window.addEventListener("popstate", function(e) {
  alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);

我是如何解决的

[狗头]
当用户在微信中打开web应用（站点）时，则提示用户使用浏览器打开；
再配合 Cookie和sessionStorage 缓存了router记录来判断用户点击返回按钮时是否需要直接回到home页；

Answer 2

返回的时候用 this.$router.replace 试试

Answer 3

直接写两个跳转，能返回上一页则不会push到首页，不返回上一页就直接跳到首页了。

        this.$router.go(-1);
        this.$router.push({name: 'home'});