如何获取是否还有上一个页面?(对返回按钮的判断)

问题描述

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

尝试过的方法

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

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

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

相关代码

if (window.history.length <= 1) {
    this.hasReturn = false;
}
阅读 16.4k
3 个回答

前言

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

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

场景

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

  • 或:判断是否有前一页

    • 通过history.length

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

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

    • 没有找到相关方法
  • 或:判断是否是通过微信浏览器唤醒设备浏览器再打开到当前网页的

    • 没有找到相关方法

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

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

还有

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

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

我是如何解决的

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

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

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

        this.$router.go(-1);
        this.$router.push({name: 'home'});
推荐问题
宣传栏