最近在做项目的时候要对页面进行过滤，由于一些原因不适合在vue的router中进行监听操作，故用到了 window.location 对象.

在控制台输入 window.location 回车后，能看到当前页面的 window.location 对象的一些信息：

下面代码中 cubeTitleLeftClick () 是项目里的一个按钮的监听事件，返回的参数值 return 'disableWebviewGoBack' 是该监听事件要求返回的参数值，而 testLogout()、testTitleLeftClick()方法只是在过滤到一定条件的页面，而进行的相应的方法调用，从而达到不同的功能效果而已。

以上这些在看代码的时候，可以不那么关注，重点关注如何获取 本页面的 hash，和截取部分hash的方法。

function cubeTitleLeftClick () { // 修改原生头部返回事件
      let pageHash = window.location.hash
      var bPos = pageHash.indexOf('/')
      bPos = pageHash.indexOf('/', bPos + 1)
      if(bPos!==-1){
        pageHash = pageHash.substr(0,bPos  + 1)
      }
      console.log('pageHash', pageHash)
      if(pageHash==='#/'){
        testLogout()
      }else if(pageHash==='#/mobileApprove/'){
        testLogout()
        testTitleLeftClick()
        return 'disableWebviewGoBack'
      }
    }

监听 页面 hash的变化 用到了 onhashchange 事件，在菜鸟教程中是这样介绍的：

下面代码用了上图的最后一种语法写法，并且写在了 vue项目中的 public文件夹下的 index.html 中，进行全局监听。

window.addEventListener("hashchange",function (e) {
          console.log('e', e)
          console.log('e.newURL', e.newURL)
          console.log('e.oldURL', e.oldURL)
    },false);

后面发现也可以写在 vue项目中的 App.vue 中进行全局监听，代码如下：

  created  () {
    window.addEventListener('hashchange', (e) => {
      console.log('e', e)
      console.log('e.newURL', e.newURL)
      console.log('e.oldURL', e.oldURL)
    }, false)
  }