页面回退方案尝试

实现方案

运用popstate事件，在componentDidMount阶段监听popstate事件，popstate在浏览器后退前进，路由跳转都会触发，因此在路由跳转前需要解绑该事件（如果能够监听到页面所有路由跳转前再解绑popstate事件，该方案会有较大改进）。如果监听到该事件触发分两种情况点击后退跳转指定页面和点击后退依旧在当前页面。

禁止回退: history.pushState(null, null, document.URL);window.addEventListener('popstate', function () {history.pushState(null, null, document.URL);});

返回指定页面： window.addEventListener('popstate', this.backPage,false); backPage = (e) => { if(!this.state.clickFlag){ this.setState({ clickFlag:true, }) window.location.href = window.location.href.split("#")[0]+"#/repaymentBill"; } }

实现补充

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

移动端则：苹果在（页面）加载时会自动触发popstate 而安卓不会

针对这个问题，则在页面加载时（pageshow），设置一个变量，在触发popstate事件时不执行JS操作，在settimeOut后将 变量放开，保证之后操作正常执行popstate

pageshow:当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)

完整的方案代码

        var bool = false;
        window.addEventListener('pageshow', function () {            
            bool = false;            //进入页面时bool置为false，防止ios立即执行popstate       
            setTimeout(function(){   //定时器延迟将bool置为true            
                bool = true;        
            },200)   
        });    

        window.history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.backPage, false);

        backPage = () => {
                if (bool) {
                    this.setState({
                        clickFlag: true,
                    })
                    window.location.href = window.location.href.split("#")[0] + "#/index";
                }
        }

复制代码

细节补充 如果是单页应用，则还有一个问题，就是路由跳转的时候，(不轮哪个浏览器，因为并没有触发页面onload)并不会触发 pageshow。所以可以在componentDidMount中将boll置为true

                bool = true;        
            },200)  ``` 复制代码