监听浏览器URL中 hash 变化

最近在做项目的时候要对页面进行过滤,由于一些原因不适合在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)
  }
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页