location.hash让路由跳转继续保持在当前页面

场景：单页面应用开发时，有时候我们会遇到，一个页面弹出一个弹框，覆盖了整个屏幕，但是不是一个新页面，一直在同一个页面，并且没有提供返回按钮，那么用户就会点浏览器上的回退按钮，这样就会跳到前一个页面，而你只是想继续在这个页面，只是让它将这个弹框关闭

分析：当用户点击浏览器的回退按钮，继续保持在当前页面

解决：多加一层路由，既想保持在当前页面，又想加入新的路由，那么只能通过hashRouter的想法，使用location.hash来改变路由

 

handleAddHistoryListen = () => {
    if (location.hash.indexOf("full") === -1) {
       location.hash = "full"
    }
    window.addEventListener('popstate', this.handleHistoryBack)
}

首先在做一个当前页面的操作时（如上面的打开弹框），执行上面的方法，这样当前路由就会添加一个对应的hash值（上面“full”可以自定义），而页面并没有刷新，路由栈却加了一个

然后当我们返回时就可以根据这个hash值是否存在来判断是否返回 

handleHistoryBack = () => {
    if (location.hash.indexOf("full") !== -1) {
        window.history.go(-1)
    }
}

 

一些性能，如清除事件绑定，请自行处理！！！！